@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

@input-number-prefix-cls: ~'@{acud-prefix}-input-number';

.@{input-number-prefix-cls} {
    &-rtl {
        direction: rtl;
    }

    &-handler-wrap {
        .@{input-number-prefix-cls}-rtl & {
            right: auto;
            left: 0;
            border-right: @border-width-base @border-style-base @input-number-border-color-base;
            border-left: 0;
            border-radius: @border-radius-base 0 0 @border-radius-base;
        }

        .@{input-number-prefix-cls}-rtl.@{input-number-prefix-cls}-borderless & {
            border-right-width: 0;
        }
    }

    &-input {
        .@{input-number-prefix-cls}-rtl & {
            direction: ltr;
            text-align: right;
        }
    }
}

.iconfont-mixin() {
    display: inline-block;
    color: @input-number-icon-color;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    > * {
        line-height: 1;
    }

    svg {
        display: inline-block;
    }

    &::before {
        display: none; // dont display old icon.
    }

    & &-icon {
        display: block;
    }
}

// == when hoverd
.hover(@color: @input-hover-border-color) {
    border-color: @color;
    border-right-width: @border-width-base !important;
}

.disabled() {
    color: @input-number-disabled-color;
    background-color: @input-number-disabled-bg;
    border-color: @input-number-disabled-border-color;
    cursor: not-allowed;
    opacity: 1;

    &:hover {
        .hover(@input-number-disabled-border-color);
    }
}

// Placeholder text
.placeholder(@color: @input-number-placeholder-color) {
    // Firefox
    &::-moz-placeholder {
        opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
    }

    &::placeholder {
        color: @color;
    }

    &:placeholder-shown {
        text-overflow: ellipsis;
    }
}

.input-size(@height, @font-size) {
    font-size: @font-size;
    height: @height;
    line-height: @height;

    > * {
        line-height: @height - 2;
    }
}