@import "common/var";

.obelisk-form .focus-input-number{
    position: relative;
    display: inline-block;
    width: 180px;
    line-height: #{$--input-height - 2};

    .focus-input {
        margin-right: 0;
        display: block;

        .input-text {
            -webkit-appearance: none;
            padding-left: #{$--input-height + 10};
            padding-right: #{$--input-height + 10};
            text-align: center;
        }
    }

    &-increase,
    &-decrease{
        position: absolute;
        z-index: 1;
        top: 1px;
        width: $--input-height;
        height: auto;
        text-align: center;
        background: $--background-color-base;
        color: $--color-text-regular;
        cursor: pointer;
        font-size: 12px;

        &:hover {
            color: $--color-primary;

            &:not(.disabled) ~ .focus-input .input-text:not([disabled]) {
                border-color: $--input-border-color-focus;
            }
        }

        &.disabled {
            color: $--disabled-color-base;
            cursor: not-allowed;
        }
    }

    &-increase {
        right: 1px;
        border-radius: 0 $--border-radius-base $--border-radius-base 0;
        border-left: $--border-base;
    }

    &-decrease {
        left: 1px;
        border-radius: $--border-radius-base 0 0 $--border-radius-base;
        border-right: $--border-base;
    }

    &.disabled {
        .focus-input-number-increase,
        .focus-input-number-decrease {
            border-color: $--disabled-border-base;
            color: $--disabled-border-base;

            &:hover {
                color: $--disabled-border-base;
                cursor: not-allowed;
            }
        }
    }

    //@include m(medium) {
    //    width: 200px;
    //    line-height: #{$--input-medium-height - 2};
    //
    //    @include e((increase, decrease)) {
    //        width: $--input-medium-height;
    //        font-size: $--input-medium-font-size;
    //    }
    //
    //    .el-input__inner {
    //        padding-left: #{$--input-medium-height + 7};
    //        padding-right: #{$--input-medium-height + 7};
    //    }
    //}
    //
    //@include m(small) {
    //    width: 130px;
    //    line-height: #{$--input-small-height - 2};
    //
    //    @include e((increase, decrease)) {
    //        width: $--input-small-height;
    //        font-size: $--input-small-font-size;
    //
    //        [class*=el-icon] {
    //            transform: scale(.9);
    //        }
    //    }
    //
    //    .el-input__inner {
    //        padding-left: #{$--input-small-height + 7};
    //        padding-right: #{$--input-small-height + 7};
    //    }
    //}
    //
    //@include m(mini) {
    //    width: 130px;
    //    line-height: #{$--input-mini-height - 2};
    //
    //    @include e((increase, decrease)) {
    //        width: $--input-mini-height;
    //        font-size: $--input-mini-font-size;
    //
    //        [class*=el-icon] {
    //            transform: scale(.8);
    //        }
    //    }
    //
    //    .el-input__inner {
    //        padding-left: #{$--input-mini-height + 7};
    //        padding-right: #{$--input-mini-height + 7};
    //    }
    //}

    .is-without-controls {
        .input-text {
            padding-left: 15px;
            padding-right: 15px;
        }
    }

    &.is-controls-right {
        .input-text {
            padding-left: 15px;
            padding-right: #{$--input-height + 10};
        }

        .focus-input-number-increase,
        .focus-input-number-decrease {
            height: auto;
            line-height: #{($--input-height - 2) / 2};

            [class*='ob-icon'] {
                transform: scale(.8);
            }
        }

        .focus-input-number-increase {
            border-radius: 0 $--border-radius-base 0 0;
            border-bottom: $--border-base;
        }

        .focus-input-number-decrease {
            right: 1px;
            bottom: 1px;
            top: auto;
            left: auto;
            border-right: none;
            border-left: $--border-base;
            border-radius: 0 0 $--border-radius-base 0;
        }

        &[class*=medium] {
            [class*=increase], [class*=decrease] {
                line-height: #{($--input-medium-height - 2) / 2};
            }
        }

        &[class*=small] {
            [class*=increase], [class*=decrease] {
                line-height: #{($--input-small-height - 2) / 2};
            }
        }

        &[class*=mini] {
            [class*=increase], [class*=decrease] {
                line-height: #{($--input-mini-height - 2) / 2};
            }
        }
    }
}