@use "../mixins" as *;
@use "../media" as *;

.auth__input {
    position: relative;

    &-field {
        @include fluid-text(20, 18, 540);

        width: 100%;
        background-color: var(--color-light-accent);
        border: none;
        border-radius: var(--border-radius-10);
        padding: 2em 1em 1em;
        outline: none;
        color: var(--color-dark-80);
        transition: background-color var(--transition-duration-03);

        @include hover {
            background-color: var(--color-light-accent-2);
        }

        &:focus {
            outline: 2px solid var(--color-accent);
            background-color: var(--color-light);
        }

        &.error {
            outline: 2px solid var(--color-error);
        }
    }

    &-label,
    &-label--required {
        @include fluid-text(16, 14, 540);

        position: absolute;
        top: 1.3em;
        left: 1.3em;
        line-height: 100%;
        user-select: none;
        color: var(--color-dark-50);
        z-index: 10;
        transition: color var(--transition-duration-03);
    }

    &-label--required::after {
        content: " *";
        color: var(--color-accent);
    }

    &-error {
        margin-left: 1em;
        margin-top: 0.2em;

        &-list {
            &-item {
                @include fluid-text(16, 14, 540);

                color: var(--color-error);
                font-weight: 600;
            }
        }
    }
}