@utility segmented-control {
  @apply flex items-center bg-components-segmented-control-bg-normal gap-x-px;
}

@utility segmented-control-regular {
  @apply rounded-lg;

  &.padding {
    @apply p-0.5;
  }
}

@utility segmented-control-large {
  @apply rounded-lg;

  &.padding {
    @apply p-0.5;
  }
}

@utility padding {
  &.segmented-control-large {
    @apply p-0.5;
  }

  & .segmented-control-regular {
    @apply p-0.5;
  }

  &.segmented-control-small {
    @apply p-px;
  }
}

@utility segmented-control-small {
  @apply rounded-md;

  &.padding {
    @apply p-px;
  }
}

@utility no-padding {
  @apply border-[0.5px] border-divider-subtle;
}

@utility segmented-control-item {
  @apply flex items-center justify-center relative border-[0.5px] border-transparent;
}

@utility segmented-control-item-regular {
  @apply px-2 h-7 gap-x-0.5 rounded-lg;
}

@utility segmented-control-item-small {
  @apply p-px h-[22px] rounded-md;
}

@utility segmented-control-item-large {
  @apply px-2.5 h-8 gap-x-0.5 rounded-lg;
}

@utility segmented-control-item-disabled {
  @apply cursor-not-allowed text-text-disabled;
}

@utility default {
  @apply hover:bg-state-base-hover text-text-tertiary hover:text-text-secondary;
}

@utility active {
  @apply border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg shadow-xs shadow-shadow-shadow-3 text-text-secondary;

  &.accent {
    @apply text-text-accent;
  }

  &.accent-light {
    @apply text-text-accent-light-mode-only;
  }
}

@utility disabled {
  @apply cursor-not-allowed text-text-disabled hover:text-text-disabled bg-transparent hover:bg-transparent;
}

@utility accent {
  &.active {
    @apply text-text-accent;
  }
}

@utility accent-light {
  &.active {
    @apply text-text-accent-light-mode-only;
  }
}

@utility item-text-regular {
  @apply p-0.5;
}

@utility item-text-small {
  @apply p-0.5 pr-1;
}

@utility item-text-large {
  @apply px-0.5;
}