//
// forms-input-spin.scss
//

.qty-input {
  display: flex;
  align-items: center;
  gap: 3px;

  input {
    border: 1px solid $input-border-color;
    background: $input-bg;
    color: $input-color;
    @include border-radius($btn-border-radius);
    width: 85px;
    height: 34px;
    padding: 3px;
    text-align: center;

    &:focus-visible {
      outline: 0;
    }
  }

  button {
    width: 34px;
    height: 34px;
    @include font-size(1rem);
    font-weight: 600;
    padding: 0;
    background: var(--#{$prefix}light);
    color: var(--#{$prefix}body-color);
    border: none;
    @include border-radius($btn-border-radius);
    &:hover {
      opacity: 0.9;
    }
  }

  &-outline {
    button {
      background-color: transparent;
      border: 1px solid $input-border-color;
    }
  }

  &-rounded {
    input {
     border-radius: 0
    }
    button {
     &.qty-input-plus{
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
     }
     &.qty-input-minus{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
     }
    }
  }
}

@each $color, $value in $theme-colors {
  .qty-input {
    &-#{$color} {
      button {
        background-color: var(--#{$prefix}#{$color});
        color: #{color-contrast($value)};
      }

      input {
        border: 1px solid var(--#{$prefix}#{$color});
      }

      &.qty-input-outline {
        button {
          background-color: transparent;
          color: var(--#{$prefix}#{$color});
          border: 1px solid var(--#{$prefix}#{$color});

          &:hover {
            color: #{color-contrast($value)};
            background-color: var(--#{$prefix}#{$color});
          }
        }
      }
    }
  }
}
