@layer components {
  .chip-group,
  .segmented,
  .mode-switch {
    --tray-inset: 4px;

    padding: var(--tray-inset);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-tray);
  }

  .chip,
  .segmented__option {
    position: relative;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: var(--choice-padding, 0.3125rem 0.875rem);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: var(--choice-font-size, var(--text-sm));
    font-weight: var(--font-weight-medium);
    user-select: none;
    transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), scale 160ms var(--ease-out);
  }

  input:not(:checked) ~ .chip,
  a.segmented__option:not([aria-current]),
  button.segmented__option:not([aria-current]) {
    cursor: pointer;

    &:active { scale: 0.97; }

    @media (any-hover: hover) {
      &:hover { color: var(--color-text); }
    }
  }

  input:checked ~ .chip,
  .segmented__option[aria-current] {
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
  }

  .chip-group {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    max-inline-size: 100%;
  }

  .chip-group--sliding {
    &::before {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      inline-size: var(--thumb-width);
      block-size: var(--thumb-height);
      border-radius: var(--radius-lg);
      background-color: var(--color-selected-fill);
      box-shadow: var(--bevel-selected);
      translate: var(--thumb-x) var(--thumb-y);
      transition: translate 0.25s var(--ease-out-overshoot-subtle), inline-size 0.25s var(--ease-out), block-size 0.25s var(--ease-out);
    }

    .chip {
      transition-duration: 0.25s;
    }

    input:checked ~ .chip {
      background-color: transparent;
      box-shadow: none;
    }
  }

  .chip-choice {
    position: relative;
  }

  .chip {
    line-height: var(--text-sm--line-height);

    input:checked ~ & {
      background-color: var(--color-selected-fill);
      box-shadow: var(--bevel-selected);
    }

    input:focus-visible ~ & {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .chip__icon {
    font-size: 1rem;
    color: var(--color-text-muted);

    input:checked ~ .chip & {
      color: inherit;
    }
  }

  .chip__note {
    font-weight: var(--font-weight-normal);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-text-muted);

    input:checked ~ .chip & {
      color: rgb(255 255 255 / 0.8);
    }

    @media (max-width: 40rem) {
      display: none;
    }
  }

  .patient-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    height: 1.875rem;
    padding-inline: 0.3125rem 0.6875rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-700);
    background-color: var(--color-white);
    background-image: linear-gradient(to bottom, var(--color-white), var(--color-slate-50));
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition-property: color, border-color, box-shadow, transform;
    transition-duration: 200ms;
    transition-timing-function: var(--ease-in-out);
  }

  a.patient-chip:hover {
    color: var(--color-slate-900);
    border-color: var(--color-slate-300);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
  }

  a.patient-chip:active {
    background-image: linear-gradient(to bottom, var(--color-slate-50), var(--color-white));
    box-shadow: var(--shadow-xs);
    transform: translateY(0);
  }

  .patient-chip__avatar {
    --avatar-size: 1.375rem;
  }

  .quick-picks {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .quick-pick {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    padding-inline: 0.5rem;
    padding-block: 0.25rem;
    border-radius: var(--radius-sm);

    &:hover {
      background-color: var(--color-gray-200);
    }
  }

  .segmented {
    --count: 2;
    --index: 0;

    position: relative;
    display: grid;
    inline-size: fit-content;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;

    &:has(> :nth-child(3 of .segmented__option)) { --count: 3; }
    &:has(> :nth-child(2 of .segmented__option)[aria-current]) { --index: 1; }
    &:has(> :nth-child(3 of .segmented__option)[aria-current]) { --index: 2; }

    &::before {
      content: "";
      position: absolute;
      inset: var(--tray-inset) auto var(--tray-inset) var(--tray-inset);
      inline-size: calc((100% - var(--tray-inset) * 2) / var(--count));
      border-radius: var(--radius-lg);
      background-color: var(--color-selected-fill);
      box-shadow: var(--bevel-selected);
      translate: calc(var(--index) * 100%) 0;
      transition: translate 0.25s var(--ease-out-overshoot-subtle);
    }

    &:is([aria-busy], turbo-frame[aria-busy] *) {
      &::before { translate: calc((1 - var(--index)) * 100%) 0; }

      > .segmented__option:not([aria-current]) { color: var(--color-white); }
      > .segmented__option[aria-current] { color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
    }
  }

  .mode-switch {
    display: inline-flex;
    gap: var(--tray-inset);

    .segmented {
      --tray-inset: 0px;

      box-shadow: none;
    }
  }

  .mode-switch--billing {
    --color-selected-fill: var(--color-violet-600);
  }

  .mode-switch__label {
    display: inline-flex;
    align-items: center;
    padding-inline: 0.5rem 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
  }
}