/* ECO component CSS: pill segment control. Skill: eco-pill-segment-control. Link it, do not copy it: <link rel="stylesheet" href="/components/css/pill-segment-control.css">
   Behaviour: /components/js/pill-segment-control.js (sliding thumb). Tokens only. Mobile-first (desktop from 769px). */
.pill-segment-control {
  position: relative; display: flex; width: 100%;          /* fluid on xs only */
  height: 48px; padding: 4px;
  background: var(--color-surface-disabled);
  border-radius: 24px; box-sizing: border-box;
  transition: background-color var(--duration-fast-3) var(--ease-standard);
}
.pill-segment-control:is(:hover, [data-state="hover"]) { background: var(--color-border-tertiary); }
@media (min-width: 640px) { .pill-segment-control { width: auto; align-self: flex-start; } }
@media (min-width: 769px) { .pill-segment-control { height: 56px; padding: 5px; border-radius: 28px; } }

/* The sliding pill: position and width are set by pill-segment-control.js */
.pill-segment-control__thumb {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0;
  background: var(--color-surface-100); border-radius: 20px;
  box-shadow: var(--shadow-elevation-input-control-switch);
  transition: transform var(--sg-duration, var(--duration-medium-2)) var(--sg-ease, var(--ease-standard)), width var(--sg-duration, var(--duration-medium-2)) var(--sg-ease, var(--ease-standard));  /* --sg-* set by the docs Motion section; recommended value is the fallback */
  pointer-events: none;
}
@media (min-width: 769px) { .pill-segment-control__thumb { top: 5px; bottom: 5px; border-radius: 23px; } }
.pill-segment-control__thumb--light { background: var(--color-surface-raised-primary); }   /* when the control already sits on a dark or grey surface */

.pill-segment-control__btn {
  position: relative; z-index: 1; flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 20px; background: transparent; border: none; border-radius: 20px; cursor: pointer;
  font-family: 'Breuer Condensed', Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 16px; letter-spacing: 0.32px;
  text-transform: uppercase; white-space: nowrap;
  color: var(--color-text-action-primary);
  font-feature-settings: 'ss02' 1, 'ss03' 1;
  transition: color var(--duration-fast-3) var(--ease-standard);
}
@media (min-width: 640px) { .pill-segment-control__btn { flex: none; } }
@media (min-width: 769px) { .pill-segment-control__btn { padding: 0 24px; border-radius: 23px; font-size: 18px; line-height: 18px; letter-spacing: 0.18px; } }
.pill-segment-control__btn:not(.pill-segment-control__btn--active):is(:hover, [data-state="hover"]) { text-decoration: underline; }
.pill-segment-control__btn--active { color: var(--color-text-action-primary-inverted); }
.pill-segment-control__thumb--light ~ .pill-segment-control__btn--active { color: var(--color-text-action-primary); }
body.keyboard-nav .pill-segment-control__btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* Medium */
.pill-segment-control--md { height: 40px; padding: 4px; border-radius: 20px; }
.pill-segment-control--md .pill-segment-control__thumb { border-radius: 16px; }
.pill-segment-control--md .pill-segment-control__btn { padding: 0 16px; border-radius: 16px; font-size: 16px; line-height: 16px; letter-spacing: 0.32px; }
@media (min-width: 769px) {
  .pill-segment-control--md { height: 48px; border-radius: 24px; }
  .pill-segment-control--md .pill-segment-control__thumb { top: 4px; bottom: 4px; border-radius: 20px; }
  .pill-segment-control--md .pill-segment-control__btn { padding: 0 20px; border-radius: 20px; font-size: 18px; line-height: 18px; letter-spacing: 0.18px; }
}
/* Small */
.pill-segment-control--sm { height: 32px; padding: 3px; border-radius: 16px; }
.pill-segment-control--sm .pill-segment-control__thumb { top: 3px; bottom: 3px; border-radius: 13px; }
.pill-segment-control--sm .pill-segment-control__btn { padding: 0 12px; border-radius: 13px; font-size: 14px; line-height: 14px; letter-spacing: 0.42px; }
@media (min-width: 769px) {
  .pill-segment-control--sm { height: 40px; padding: 4px; border-radius: 20px; }
  .pill-segment-control--sm .pill-segment-control__thumb { top: 4px; bottom: 4px; border-radius: 16px; }
  .pill-segment-control--sm .pill-segment-control__btn { padding: 0 16px; border-radius: 16px; font-size: 16px; line-height: 16px; letter-spacing: 0.48px; }
}
/* XSmall: same height on mobile and desktop */
.pill-segment-control--xs { height: 32px; padding: 3px; border-radius: 16px; }
.pill-segment-control--xs .pill-segment-control__thumb { top: 3px; bottom: 3px; border-radius: 13px; }
.pill-segment-control--xs .pill-segment-control__btn { padding: 0 10px; border-radius: 13px; font-size: 12px; line-height: 12px; letter-spacing: 0.48px; }
@media (min-width: 769px) { .pill-segment-control--xs .pill-segment-control__btn { padding: 0 12px; font-size: 14px; line-height: 14px; letter-spacing: 0.56px; } }