@import './theme/default';

@mixin disable {
  @include theme-color(color, stroke, 4);
  @include theme-color(background-color, stroke, 8);
  cursor: not-allowed;

  > .zenticon {
    @include theme-color(color, stroke, 4);
  }

  &:hover {
    @include theme-color(color, stroke, 4);

    > .zenticon {
      @include theme-color(color, stroke, 4);
    }
  }
}

.zent-number-input {
  width: 200px;

  &:not(.zent-input-wrapper-disabled):hover {
    @include theme-color(border-color, primary, 4);
  }

  $p: &;

  &-arrows {
    display: flex;
    flex-direction: column;
    user-select: none;

    #{$p}-arrow {
      @include theme-color(border-left-color, stroke, 5);
      @include theme-color(background-color, stroke, 9);
      border-left-width: 1px;
      border-left-style: solid;
      margin-left: -1px;
      cursor: pointer;
      width: 20px;
      height: 15px;
      line-height: 15px;
      text-align: center;

      &.zent-number-input-arrow-disable {
        @include disable;
      }

      &:hover:not(#{$p}-arrow-disable) {
        z-index: 10;
        @include theme-color(border-color, primary, 4);
        > .zenticon {
          @include theme-color(color, primary, 4);
        }
      }

      &:active:not(#{$p}-arrow-disable) {
        @include theme-color(background-color, primary, 4, 0.1);
      }

      > .zenticon {
        @include theme-color(color, stroke, 2);
        line-height: 15px;
        position: static;
        font-size: 12px;
      }
    }

    #{$p}-arrowup {
      @include theme-color(border-bottom-color, stroke, 5);
      border-bottom-width: 1px;
      border-bottom-style: solid;
    }
    #{$p}-arrowdown {
      @include theme-color(border-top-color, stroke, 5);
      border-top-width: 1px;
      border-top-style: solid;
      margin: -1px;
    }
  }

  &-count {
    @include theme-color(background-color, stroke, 9);
    @include theme-color(color, stroke, 2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 100%;
    cursor: pointer;
    text-align: center;
    user-select: none;
    flex-grow: 0;
    flex-shrink: 0;

    &.zent-number-input-count-disable {
      @include disable;
    }

    &:hover {
      @include theme-color(color, primary, 4);
    }

    &reduce {
      @include theme-color(border-right-color, stroke, 5);
      border-right-width: 1px;
      border-right-style: solid;
    }

    &add {
      @include theme-color(border-left-color, stroke, 5);
      border-left-width: 1px;
      border-left-style: solid;
    }
  }
}