.ga-input--quantity-selector {
  @apply w-40 px-2;

  &:has(input:disabled):has(input:not(:placeholder-shown)) {
    .ga-input__quantity-separator {
      @apply bg-(--ga-color-text-on-action);
    }

    .ga-input__quantity-button {
      @apply text-(--ga-color-text-on-action);
    }
  }

  input {
    @apply min-w-0 flex-1 bg-transparent px-2 leading-6 outline-none;

    appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }

  .ga-input__quantity-separator {
    @apply h-6 w-px bg-(--ga-color-border-disabled);
  }

  .ga-input__quantity-button {
    @apply flex w-6 shrink-0 cursor-pointer items-center justify-center bg-transparent p-1;

    &:hover:not(:disabled) {
      @apply rounded bg-(--ga-color-surface-action-hover-2) outline-1 outline-(--ga-color-border-action-hover);
    }

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

    &:disabled {
      @apply cursor-not-allowed bg-transparent text-(--ga-color-text-disabled);
    }
  }
}