@import "../styles/base/fn.wxss";

.input-number(@theme, @color) {
    .@{wuxClassNamePrefix}-input-number__selector--@{theme} {
        color: @color;
    }

    &--circle .@{wuxClassNamePrefix}-input-number__selector--@{theme} {
        border-color: @color;
    }
}

.@{wuxClassNamePrefix}-input-number {
    position: relative;
    display: flex;

    &__input {
        width: 48px;
        height: 26px;
        font-size: 16px;
        line-height: 26px;
        color: #666;
        appearance: none;
        border: 1px solid #ececec;
        padding: 3px 0;
        text-align: center;
        min-height: inherit;
        box-sizing: border-box;
    }

    &__selector {
        width: 34px;
        height: 26px;
        font-size: 24px;
        line-height: 26px;
        color: @balanced;
        border: 1px solid #ececec;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;

        &--disabled {
            color: #ccc !important;
        }
    
        &--sub {
            border-right: none;
            padding: 3px 10px;
            border-radius: 2px 0 0 2px;
        }
    
        &--add {
            border-left: none;
            padding: 3px 8px;
            border-radius: 0 2px 2px 0;
        }
    }

    &__icon {
        font-size: inherit !important;
        vertical-align: middle;
        line-height: inherit;
    }

    &--circle {
        .@{wuxClassNamePrefix}-input-number__input {
            border-color: transparent;
        }

        .@{wuxClassNamePrefix}-input-number__selector {
            width: 26px;
            border-radius: 50%;
            border: 1px solid @balanced;

            &--disabled {
                border-color: #ccc !important;
            }
        }
    }

    .input-number(light, @light-inverse);
    .input-number(stable, @stable-inverse);
    .input-number(positive, @positive);
    .input-number(calm, @calm);
    .input-number(assertive, @assertive);
    .input-number(balanced, @balanced);
    .input-number(energized, @energized);
    .input-number(royal, @royal);
    .input-number(dark, @dark);
}