.subscription-usage {
  position: relative;
}

.subscription-usage > button {
  color: var(--muted);
  border: 0;
  background: transparent;
  padding: 4px;
}

.subscription-usage > button:hover,
.subscription-usage > button[aria-expanded="true"] {
  color: var(--accent);
}

.subscription-usage > button[aria-expanded="true"]:hover {
  color: var(--accent-fade);
}

.subscription-panel {
  position: absolute;
  z-index: 30;
  top: 100%;
  right: 0;
  margin-top: 16px;
  width: min(352px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  white-space: normal;
}

.subscription-body {
  display: grid;
  gap: 12px;
}

.subscription-window > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.subscription-window meter {
  width: 100%;
  height: 12px;
}

.subscription-panel small {
  color: var(--muted);
}