@import '../core/variables.less';
@import '../theme/index.less';

@ant-input: ant-input;
@ant-btn: ant-btn;

.@{ant-input} {
    .properties(font-size, 14);
    .linear-gradient-background();
    border-color: var(--mi-border, @mi-border);
    .border-radius(8);
    color: var(--mi-font, @mi-font);

    &:hover,
    &:focus {
        border-color: var(--mi-theme, @mi-theme);
        box-shadow: 0 0 0 2px fade(@mi-theme, 20%);
    }

    &-lg {
        .properties(font-size, 14);
        .properties(padding-left, 12);
        .properties(padding-right, 12);
        .properties(padding-top, 8);
        .properties(padding-bottom, 8);
    }

    &-group {
        &-wrapper {
            .linear-gradient-background();
            .border-radius();
            overflow: hidden;
        }

        & > .@{ant-input}:first-child,
        &-addon:first-child {
            background: transparent;
            border-color: var(--mi-border, @mi-border);
            border-right: none;
            color: var(--mi-font, @mi-font);
            border-radius: .25rem 0 0 .25rem;
            .properties(font-size, 14);
            .properties(line-height, 25);

            &:hover,
            &:focus {
                outline: none;
                box-shadow: none;
                border-color: var(--mi-border, @mi-border);
            }
        }

        &&-compact {
            .linear-gradient-background();

            .ant-input-search,
            .ant-select .ant-select-selector {
                background: transparent;
            }
        }
    }

    &-search > &-group > &-group-addon:last-child,
    &-search > &-group > &-group-addon:last-child > button {
        background: transparent;
        border-color: var(--mi-border, @mi-border);
        border-left: none;
        color: var(--mi-font, @mi-font);
        left: 0;
    }

    &-search > &-group > &-group-addon:last-child > &-search-button:not(.@{ant-input}-primary) {
        color: var(--mi-font, @mi-font);
        border-radius: 0 .25rem .25rem 0;
        overflow: hidden;
    }

    &-number {
        border-color: var(--mi-border, @mi-border);
        background-color: transparent;

        &:focus,
        &:hover {
            border-color: var(--mi-them, @mi-theme);
        }

        &-handler {
            &:hover &-up-inner,
            &:hover &-down-inner {
                color: var(--mi-theme, @mi-theme);
            }
        }
    }

    &-affix {
        &-wrapper {
            .linear-gradient-background();

            > input.@{ant-input} {
                &:hover,
                &:focus {
                    box-shadow: none;
                }
            }
        }
    }
}