@import '../../vars.css';

.input {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    margin: var(--gap-0);
    outline: none;
    text-overflow: ellipsis;
    box-sizing: border-box;
    -webkit-appearance: none;

    &,
    &::placeholder {
        @mixin paragraph_component_primary;
    }

    &.bold {
        &,
        &::placeholder {
            @mixin accent_component_primary;
        }
    }

    &.medium {
        &,
        &::placeholder {
            @mixin action_component_primary;
        }
    }

    &::placeholder {
        transition:
            opacity 0.2s ease,
            color 0.2s ease;
    }

    &.size-40 {
        padding: var(--gap-0) var(--gap-8);

        &,
        &::placeholder {
            @mixin paragraph_component_secondary;
        }

        &.bold {
            &,
            &::placeholder {
                @mixin accent_component_secondary;
            }
        }

        &.medium {
            &,
            &::placeholder {
                @mixin action_component_secondary;
            }
        }
    }

    /* Убирает синюю заливку при автокомплите */

    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
        &:first-line {
            @mixin paragraph_component;
        }

        /* Hack from http://stackoverflow.com/a/29350537 */
        transition: background-color 999999s ease-in-out 0s;
    }

    &:-webkit-autofill {
        animation: onautofillstart 999999s forwards;
    }

    &:not(:-webkit-autofill) {
        /* Позволяет отслеживать autofill через js */
        animation: onautofillcancel 999999s;
    }

    /* Убирает нативные стрелочки при type=number */

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    /* Firefox */
    &[type='number'] {
        -moz-appearance: textfield;
    }
}

.hasInnerLabel {
    &::placeholder {
        opacity: 0;
    }

    &.size-40 {
        height: var(--form-control-40-min-height);
    }

    &.size-48 {
        height: var(--form-control-s-min-height);
    }

    &.size-56 {
        height: var(--form-control-m-min-height);
    }

    &.size-64 {
        height: var(--form-control-l-min-height);
    }

    &.size-72 {
        height: var(--form-control-xl-min-height);
    }
}

.block {
    width: 100%;
}

.errorIcon {
    display: var(--input-error-icon-display);
}

* + .errorIcon {
    display: var(--input-error-icon-not-alone-display);
}

.successIcon {
    display: var(--input-success-icon-display);
}

.errorIcon,
.successIcon {
    &:not(.size_40) {
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }
}

/* DISABLED STATE */

.input:disabled {
    cursor: var(--disabled-cursor);
    opacity: 1;
}

/* FOCUS STATE */

.input:focus.hasInnerLabel::placeholder,
.input:focus.hasInnerLabel.disableUserInput::placeholder {
    opacity: 1;
}

.focusVisible.focusVisible {
    @mixin focus-outline;
}

/* READ-ONLY STATE */

.hasInnerLabel:read-only:focus::placeholder {
    opacity: 0;
}

@keyframes onautofillstart {
    from {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    to {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.01);
    }
}
@keyframes onautofillcancel {
    from {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    to {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.01);
    }
}