@import "../variables";
@import "../mixins";

.InputWrapper {
    position: relative;
}

/* stylelint-disable max-nesting-depth, no-descending-specificity */

.Input {
    @include control;

    border: $border_control_input;
    color: $color_dark_text;
    font-size: $font_size_default;
    line-height: $line_height_control;
    padding: $offset_main_half $offset_main;

    &-textarea,
    &-multiple {
        height: auto;
    }

    &-textarea {
        resize: vertical;
    }

    .InputWrapper & {
        width: 100%;
    }

    .InputWrapper-with-icon-left & {
        padding-left: $offset_main * 2 + $icon-default-size;
    }

    .InputWrapper-with-icon-right & {
        padding-right: $offset_main * 2 + $icon-default-size;
    }

    .Form-input-wrapper-compound & {
        flex-grow: 1;
    }

    &:hover {
        color: $color_dark_text_auxilliary;
    }

    &:focus {
        &,
        &:hover {
            border-color: $color_action_main;
            box-shadow: $control_box_shadow;
            color: $color_dark_text_auxilliary;
        }
    }

    &:disabled,
    &-disabled,
    &[readonly],
    &-readonly {
        &,
        &:hover,
        &:focus,
        &:active {
            @include control-default-disabled;

            border-color: $color_control_border_input;
        }
    }

    &[readonly],
    &-readonly {
        &,
        &:hover,
        &:focus,
        &:active {
            color: $color_dark_text_auxilliary;
        }
    }

    &-error {
        border-color: $color_danger;
    }
}

/* stylelint-disable selector-no-type */

span.Input {
    display: block;
}

.InputWrapper-icon {
    @include transition;
    @include inline-middle;

    cursor: pointer;
    height: 100%;
    min-height: $control_form_size;
    min-width: $control_form_size;
    padding-right: $offset_main;
    position: absolute;
    right: 0;
    top: 0;

    &-search {
        input {
            height: 0;
            opacity: 0;
            position: absolute;
            visibility: hidden;
            width: 0;
        }
    }

    .InputWrapper-with-icon-left & {
        left: 0;
        padding-left: $offset_main;
        right: auto;
    }

    .InputWrapper-with-icon-right & {
        padding-right: $offset_main;
        right: 0;
    }
}
/* stylelint-enable selector-no-type */

/* stylelint-enable max-nesting-depth, no-descending-specificity */

.Input-currency {
    display: inline-block;
    margin-left: $offset_main * .5;
}

/* stylelint-disable selector-no-vendor-prefix */
::-webkit-input-placeholder {
    color: $color_text_placeholder;
}

::-moz-placeholder {
    color: $color_text_placeholder;
}

:-ms-input-placeholder {
    color: $color_text_placeholder;
}

:-moz-placeholder {
    color: $color_text_placeholder;
}
/* stylelint-enable selector-no-vendor-prefix */