.currency-switch {
  --currency-ink: var(--ink, #f5f7fc);
  --currency-line: var(--line, rgba(187, 206, 245, 0.17));
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  padding: 3px;
  border: 1px solid var(--currency-line);
  border-radius: 999px;
  color: var(--currency-ink);
  background: transparent;
}

.currency-switch button[data-currency] {
  flex: 1 1 0;
  min-width: 48px;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  color: var(--currency-ink);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.currency-switch button[data-currency]:hover {
  background: rgba(187, 206, 245, 0.12);
}

.currency-switch button[data-currency][aria-pressed="true"] {
  color: var(--navy, #090d1a);
  background: var(--lime, #c8e84a);
}

.currency-switch button[data-currency]:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--lime, #c8e84a);
  outline-offset: 3px;
}

.currency-switch.on-light {
  --currency-ink: #090d1a;
  --currency-line: rgba(9, 13, 26, 0.35);
  background: #fff;
}

.currency-switch.on-light button[data-currency]:hover {
  background: rgba(9, 13, 26, 0.08);
}

.currency-switch.on-light button[data-currency][aria-pressed="true"] {
  color: #090d1a;
  background: var(--lime, #c8e84a);
}

.currency-switch.on-light button[data-currency]:focus-visible {
  box-shadow: 0 0 0 7px #090d1a;
}