.ga-segmented-control {
  @apply text-md inline-flex items-center justify-center gap-0.5 rounded border border-(--ga-color-border-tertiary) p-0.5 align-middle;

  .ga-segmented-control__button {
    @apply animate-hover inline-flex h-8.5 cursor-pointer items-center justify-center gap-2 rounded border border-transparent px-4 align-middle leading-1 whitespace-nowrap text-(--ga-color-text-action) transition-colors;

    &.ga-segmented-control__button--selected,
    &:hover {
      @apply border-(--ga-color-border-action);
    }

    &.ga-segmented-control__button--selected {
      @apply bg-(--ga-color-surface-primary);
    }

    &:hover:not(.ga-segmented-control__button--selected) {
      @apply bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-action-hover);
    }

    &:focus-visible {
      @apply outline-2 outline-offset-1 outline-(--ga-color-border-focus);
    }

    &.ga-segmented-control__button--icon-only {
      @apply px-2.25;

      &:hover:not(.ga-segmented-control__button--selected) {
        @apply text-(--ga-color-icon-action-hover);
      }
    }
  }

  .ga-segmented-control__button-sr-label {
    @apply sr-only;
  }
}