@import '../../common/styles/_abstract-control';
@import '../../common/styles/_abstract-control-text';
@import '../../common/styles/_abstract-icon';
@import '../../common/styles/button-base';
@import '../../common/styles/_layers';
@import '../../common/styles/media/_screen';

@input-size-range: 40;

/* stylelint-disable-next-line unit-whitelist */
@char-size-to-em-ratio: 0.5em;
@char-size-to-em-correction: 2.5;

@input-prefix-padding-right: 3px;
@input-border-color: @color-gray-40;

.bloko-input-icon-block() {
    display: flex;
    align-items: center;
}

.bloko-input-text-icon-placement(@icon-position) {
    > .bloko-icon,
    > .bloko-icon-react-root {
        @{icon-position}: @control-icon-margin;
    }

    > .bloko-icon-link,
    > .bloko-icon-dynamic {
        position: absolute;
        top: 0;
        @{icon-position}: 0;
        z-index: 1;
    }
}

.bloko-input-text-icon-placement-input-correction(@icon-position) {
    .bloko-input-text {
        padding-@{icon-position}: @control-icon-size + @control-icon-margin * 2;
    }

    .bloko-input-text_scale-large {
        padding-@{icon-position}: @control-icon-size + @control-icon-margin-large * 2;
    }
}

/* stylelint-disable selector-max-compound-selectors */
.bloko-input-text-icon-placement-input-correction(@icon-position) when (@icon-position = left) {
    .bloko-input-text {
        padding-right: @control-padding-horizontal;
    }

    .bloko-input-text_scale-large {
        padding-right: @control-padding-horizontal-large;
    }
}
/* stylelint-enable */

/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:local(.bloko-input-text) {
    /* stylelint-disable-next-line property-no-unknown */
    composes: bloko-input-text from '../controlGroup/controlGroup.less';
}

.bloko-input-text {
    .abstract-control();
    .abstract-control-text();
    .abstract-control-text-input();

    border: @control-border-width solid @input-border-color;

    .sized-loop (@size) when (@size > 1) {
        .bloko-input-text-wrapper_sized &[size='@{size}'],
        &_sized[size='@{size}'] {
            width: @size * @char-size-to-em-ratio + @char-size-to-em-correction;
        }
        .sized-loop(@size - 1);
    }

    .sized-loop(@input-size-range);
}

.bloko-input-text_scale-small {
    .abstract-control-text-input-scale-small();
}

.bloko-input-text_scale-large {
    .abstract-control-text-input-scale-large();
}

.bloko-input-text_name {
    text-transform: capitalize;

    &::-webkit-input-placeholder {
        text-transform: none;
    }

    &::-moz-placeholder {
        text-transform: none;
    }

    &:-ms-input-placeholder {
        text-transform: none;
    }
}

.bloko-input-text_light {
    border: 0;
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:local(.bloko-input-text-wrapper) {
    /* stylelint-disable-next-line property-no-unknown */
    composes: bloko-input-text-wrapper from '../controlGroup/controlGroup.less';
}

.bloko-input-text-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
}

:global(.bloko-input-text-wrapper),
.bloko-input-text-wrapper {
    > .bloko-icon,
    > .bloko-icon-react-root {
        cursor: text;
        position: absolute;
        top: 50%;
        margin-top: -@control-icon-size / 2;
        pointer-events: none;
    }

    > .bloko-icon-link,
    > .bloko-icon-dynamic > .bloko-icon-link {
        .bloko-input-icon-block();

        line-height: @control-height-scale-medium - @control-border-width * 2;
        height: @control-height-scale-medium;
        margin: 0;
        padding: 0 @icon-padding-link;
    }
}

.bloko-input-text-wrapper_icon-left {
    .bloko-input-text-icon-placement(left);
    .bloko-input-text-icon-placement-input-correction(left);
}

:global(.bloko-input-text-wrapper_icon-left) {
    .bloko-input-text-icon-placement(left);
}

.bloko-input-text-wrapper_icon-right {
    .bloko-input-text-icon-placement(right);
    .bloko-input-text-icon-placement-input-correction(right);
}

:global(.bloko-input-text-wrapper_icon-right) {
    .bloko-input-text-icon-placement(right);
}

.bloko-input-text-wrapper_sized {
    width: auto;
}

.bloko-input-text[type='password']::-ms-reveal {
    display: none;
}

.bloko-input-text__prefix {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    padding-left: @control-padding-horizontal;
    padding-right: @input-prefix-padding-right;
    font-family: @_font-family;
    user-select: none;
    line-height: @control-height-scale-medium;

    /* stylelint-disable selector-max-universal */
    *[disabled] & {
        color: @color-gray-50;
    }
    /* stylelint-enable */
}

.bloko-input-text__prefix_small {
    line-height: @control-height-scale-small;
}

.bloko-input-text__prefix_large {
    .bloko-text-large();

    line-height: @control-height-scale-large;
    padding-left: @control-padding-horizontal-large;
}

.bloko-input-text__prefix_with-icon-left {
    padding-left: @icon-size-16 + 2 * @icon-padding-link;
}

:global(.bloko-input-text_scale-small),
.bloko-input-text_scale-small {
    ~ .bloko-icon-link,
    ~ .bloko-icon-dynamic > .bloko-icon-link {
        .bloko-text-small();

        line-height: @control-height-scale-small - @control-border-width * 2;
        height: @control-height-scale-small;
    }
}

:global(.bloko-input-text_scale-large),
.bloko-input-text_scale-large {
    ~ .bloko-icon-link,
    ~ .bloko-icon-dynamic > .bloko-icon-link {
        .bloko-text-large();

        line-height: @control-height-scale-large - @control-border-width * 2;
        height: @control-height-scale-large;
        padding: 0 @control-icon-margin-large;
    }
}

.bloko-input-text__inner-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

.bloko-input__postfix-container {
    z-index: 4;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 @control-padding-horizontal;
    pointer-events: none;
}

.bloko-input__postfix-container_small {
    .abstract-control-text-input-scale-small();

    padding: 0 @control-padding-horizontal;
}

.bloko-input__postfix-container_large {
    .abstract-control-text-input-scale-large();

    padding: 0 @control-padding-horizontal-large;
}

.bloko-input__postfix-container_with-icon-left {
    padding-left: @icon-size-16 + 2 * @icon-padding-link;
}

.bloko-input__postfix-container_with-icon-right {
    padding-right: @icon-size-16 + 2 * @icon-padding-link;
}

.bloko-input__postfix-container_with-icon-left.bloko-input__postfix-container_large {
    padding-left: @control-icon-size + @control-icon-margin-large * 2;
}

.bloko-input__postfix-container_with-icon-right.bloko-input__postfix-container_large {
    padding-right: @control-icon-size + @control-icon-margin-large * 2;
}

.bloko-input__postfix-text {
    padding-left: @control-border-width;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    white-space: pre;
}

.bloko-input__value-ghost {
    visibility: hidden;
    user-select: none;
}