:block(input):mod(theme islands) {
    font-family: var(--input-fontFamily);

    position: relative;


    display: inline-block;

    background: var(--color-control-border);

    -webkit-tap-highlight-color: var(--color-control-hover);

    border-radius: var(--input-borderRadius);

    /* Decorative element (inner background) */
    &:before {
        position: absolute;
        top: var(--input-before-space);
        right: var(--input-before-space);
        bottom: var(--input-before-space);
        left: var(--input-before-space);
        border-radius: var(--input-before-borderRadius);

        content: '';

        background: var(--color-control-default);
    }

    :block(input):elem(box) {
        position: relative;

        display: block;

        -webkit-touch-callout: none;

        user-select: none;
    }

    :block(input):elem(control) {
        font: inherit;
        line-height: inherit;

        position: relative;

        display: inline-block;

        box-sizing: border-box;
        padding: 0;
        width: 100%;

        border: 0;
        outline: none;
        background: none;

        color: var(--color-control-typo-primary);

        -webkit-appearance: none;

        /*лишние отступы у текста*/
        &::-webkit-search-decoration {
            -webkit-appearance: none;
        }

        /*нативный крестик*/
        &::-webkit-search-cancel-button {
            display: none;
        }

        &::-webkit-input-placeholder {
            color: var(--color-control-typo-placeholder);
            text-indent: 0;
        }

        &::-moz-placeholder {
            opacity: 1;
            color: var(--color-control-typo-placeholder);
        }

        &::-ms-clear {
            display: none;
        }

        &::-webkit-autofill {
            border: 1px solid transparent;
            background-clip: padding-box;
        }
    }

    &:block(input):mod(has-clear) :block(input):elem(control) {
        text-overflow: ellipsis;
    }

    :block(input):elem(clear) {
        position: absolute;
        top: 0;
        right: 0;

        cursor: text;
        transition: opacity 0.1s ease-out;

        opacity: 0;
        background: 50% 50% no-repeat;

        &:mod(visible) {
            opacity: 0.3;

            &:hover {
                cursor: pointer;

                opacity: 1;
            }
        }
    }

    &:block(input):mod(focused) {
        z-index: 1;

        &:before {
            box-shadow: var(--input-focused-boxShadow) var(--color-control-border-focus), inset var(--input-focused-inset-boxShadow) var(--color-control-border-focus); /* */
        }

        :block(input):elem(control) {
            text-overflow: clip; /* fix ellipsis bug in Chrome */
        }
    }

    &:block(input):mod(disabled) {
        background: var(--color-control-disable);

        &:before,
        :block(input):elem(clear) {
            display: none;
        }

        :block(input):elem(box),
        :block(input):elem(control) {
            color: var(--color-control-typo-disable);
            cursor: default;
		}
    }

    &:block(input):mod(size s) :block(input):elem(clear),
    &:block(input):mod(size m) :block(input):elem(clear) {
        width: var(--input-size-s-m-clear-width); /* */
        height: var(--input-size-s-m-clear-height); /* */

        background-image: var(--input-clear);
        background-position: 50% 50%;

    }

    &:block(input):mod(size s) {
        font-size: var(--input-size-s-fontSize);
        line-height: var(--input-size-s-lineHeight);

        :block(input):elem(control) {
            height: var(--input-size-s-control-height);
            padding: var(--input-size-s-control-padding);
        }

        &:block(input):mod(has-clear) :block(input):elem(control) {
            padding-right: var(--input-size-s-has-clear-paddingRight);
        }

    }

    &:block(input):mod(size m) {
        font-size: var(--input-size-m-fontSize);
        line-height: var(--input-size-m-lineHeight);

        :block(input):elem(control) {
            height: var(--input-size-m-control-height);
            padding: var(--input-size-m-control-padding);
        }

        &:block(input):mod(has-clear) :block(input):elem(control) {
            padding-right: var(--input-size-m-has-clear-paddingRight);
        }
    }

    &:block(input):mod(size l) :block(input):elem(clear),
    &:block(input):mod(size xl) :block(input):elem(clear) {
        width: var(--input-size-l-xl-clear-width); /* */
        height: var(--input-size-l-xl-clear-height); /* */

        background-image: var(--input-clear);
        background-position: 50% 50%;

    }

    &:block(input):mod(size l) {
        font-size: var(--input-size-l-fontSize);
        line-height: var(--input-size-l-lineHeight);

        :block(input):elem(control) {
            height: var(--input-size-l-control-height);
            padding: var(--input-size-l-control-padding);
        }

        &:block(input):mod(has-clear) :block(input):elem(control) {
            padding-right: var(--input-size-l-has-clear-paddingRight);
        }
    }

    &:block(input):mod(size xl) {
        font-size: var(--input-size-xl-fontSize);
        line-height: var(--input-size-xl-lineHeight);

        :block(input):elem(control) {
            height: var(--input-size-xl-control-height);
            padding: var(--input-size-xl-control-padding);
        }

        &:block(input):mod(has-clear) :block(input):elem(control) {
            padding-right: var(--input-size-xl-has-clear-paddingRight);
        }
    }

    &:block(input):mod(has-clear) :block(input):elem(control) {
        padding-right: 0;
    }

    &:block(input):mod(width available) {
        width: 100%;
    }

    &:block(input):mod(type password) :block(input):elem(control) {
        text-overflow: clip;
    }
}

:block(control-group) {
    :block(input):mod(theme islands) {
        &:before {
            right: var(--control-group-before-right);
        }
    }

    > :block(input):mod(theme islands):last-child,
    > :last-child :block(input):mod(theme islands) {
        &:before {
            right: var(--control-group-last-child-right);
        }
    }
}