@import './variables';
@import './mixins/hairline';

.win-trade-stepper {
  font-size: 0;
  user-select: none;
  display: flex;
  border-color: @trade-stepper-border-color;
  position: relative;

  &__minus,
  &__plus {
    position: relative;
    box-sizing: border-box;
    width: @trade-stepper-input-height;
    height: @trade-stepper-input-height;
    line-height: 14px;
    margin: 0;
    padding: 0;
    font-size: @trade-stepper-button-font-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: @trade-stepper-button-color;
    vertical-align: middle;
    background-color: @trade-stepper-button-backgrounnd-color;
    border: 0;
    user-select: none;
    cursor: pointer;

    &:active {
      background-color: @trade-stepper-active-color;
    }

    &--disabled {
      color: @trade-stepper-button-disabled-icon-color;
      background-color: @trade-stepper-button-disabled-background-color;
      cursor: not-allowed;

      &:active {
        background-color: @trade-stepper-button-disabled-background-color;
      }
    }

    .win-icon {
      font-size: @trade-stepper-button-icon-font-size;
    }
  }

  &__minus {
    border-radius: @trade-stepper-border-radius 0 0 @trade-stepper-border-radius;
    &::after {
      .hairline-right(@trade-stepper-border-color, 0, 0);
    }
  }

  &__plus {
    border-radius: 0 @trade-stepper-border-radius @trade-stepper-border-radius 0;
    &::before {
      .hairline-left(@trade-stepper-border-color, 0, 0);
    }
  }

  &__input {
    box-sizing: border-box;
    height: @trade-stepper-input-height;
    margin: 0;
    padding: 0;
    width: 100%;
    color: @trade-stepper-input-text-color;
    font-size: @trade-stepper-input-font-size;
    line-height: @trade-stepper-input-line-height;
    text-align: center;
    vertical-align: middle;
    background-color: @trade-stepper-background-color;
    border: 0;
    border-width: 1px 0;
    border-radius: 0;
    -webkit-appearance: none;
    flex: 1;

    &:disabled {
      color: @trade-stepper-input-disabled-text-color;
      background-color: @trade-stepper-input-disabled-background-color;
      // fix disabled color in iOSF
      -webkit-text-fill-color: @trade-stepper-input-disabled-text-color;
      opacity: 1;
    }

    &:read-only {
      cursor: default;
    }
  }

  &__trade-input {
    box-sizing: border-box;
    height: @trade-stepper-input-height;
    margin: 0;
    padding: 0;
    color: @trade-stepper-input-text-color;
    font-size: @trade-stepper-input-font-size;
    line-height: @trade-stepper-input-line-height;
    text-align: center;
    vertical-align: middle;
    background-color: @trade-stepper-background-color;
    border: 0;
    border-width: 1px 0;
    border-radius: 0;
    -webkit-appearance: none;
    flex: 1;

    &.win-trade-keyboard {
      .win-trade-keyboard__control {
        color: @trade-stepper-input-text-color;
        &-placeholder {
          color: @trade-stepper-input-disabled-text-color;
        }
      }
      &--disabled {
        .win-trade-keyboard__control {
          color: @trade-stepper-input-disabled-text-color;
          background-color: @trade-stepper-input-disabled-background-color;
        }
      }
    }
  }

  &--hairline {
    border-width: 0;

    &::after {
      border-color: inherit;
      border-radius: calc(~'@{trade-stepper-border-radius} * 2');
    }
  }

  .win-popover__wrapper {
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }

  &__popover {
    padding: 0 @padding-sm;
    height: 22px;
  }
}