@use 'sass:color';

.ca-product-quantity {
  $block: &;

  &__button {
    transition: opacity 200ms ease;

    &:disabled {
      pointer-events: none;
      opacity: 0.4;
    }
  }

  &__input {
    &:focus-visible {
      box-shadow: none;
    }
  }

  &--default {
    display: inline-flex;
    border: $border-dark;
    border-radius: $default-radius;
    overflow: hidden;

    #{$block}__button {
      @include flex-calign;

      background-color: $c-light-gray;
      width: 30px;
      height: 30px;
      text-align: center;
      font-size: 0.9em;

      @include bp(laptop) {
        transition: background-color 150ms ease;

        &:hover {
          background-color: color.adjust($c-light-gray, $lightness: 1%);
        }
      }
    }
    #{$block}__input {
      width: 34px;
      height: 30px;
      text-align: center;
      border-left: $border-dark;
      border-right: $border-dark;
    }
  }

  &--stacked {
    height: rem-calc(50);
    width: rem-calc(100);
    display: flex;
    flex-flow: column wrap;

    #{$block}__input {
      height: 100%;
      width: 67%;
      border: $border-light;
      border-right: none;
      padding: 0 rem-calc(16);
      font-size: $font-size-m;
      border-top-left-radius: $default-radius;
      border-bottom-left-radius: $default-radius;
    }

    #{$block}__button {
      @include flex-calign;

      height: 50%;
      width: 33%;
      background-color: $c-light-gray;
      font-size: $font-size-xl;

      &--increase {
        border-top-right-radius: $default-radius;
      }

      &--decrease {
        border-bottom-right-radius: $default-radius;
      }
    }
  }

  &--rounded {
    display: inline-flex;

    #{$block}__button {
      @include icon-circle;
    }

    #{$block}__input {
      width: rem-calc(30);
      margin: 0 rem-calc(5);
      text-align: center;
    }
  }
}