@import "../_base.scss";

%base-text-input {
    $horizontal-padding: 1vw;

    height: 100%;
    width: 100%;

    border: $border-normal;
    border-color: get-color(primary, 90);
    border-radius: $border-radius;

    padding: 0px $horizontal-padding;
}

%base-input {
    $horizontal-padding: 1vw;

    height: 100%;
    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: $border-radius;

    font-size: 2vh;

    &:focus {
        outline: none;
    }

    &.invalid {
        border-color: get-color(critical, 100);
    }
}

%base-helper-text {
    margin: 0;
    margin-top: 0.3vh;

    font-size: 1.2vh;

    color: get-color(primary, 90);

    p {
        margin: 0;

        &.invalid {
            color: get-color(critical, 100);
        }
    }
}

.text-input {
    @extend %base-text-input;

    &__input {
        @extend %base-input;
    }

    &__helper-text {
        @extend %base-helper-text;
    }
}

.password-text-input {
    @extend %base-text-input;

    display: grid;
    grid-template-columns: auto 7.5% 1% 7.5%;
    grid-template-rows: 100%;
    grid-template-areas:
        "input strength . toggle"
        "helper helper helper helper"
    ;

    transition: $transition-duration;

    &.no-strength {
            grid-template-columns: auto 0% 0% 7.5%;
    }

    &__input {
        @extend %base-input;

        grid-area: input;
    }

    %inner {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__strength-level {
        @extend %inner;

        grid-area: strength;

        p {
            margin: 0;
            text-align: center;
            width: 100%;

            font-size: 2vh;
        }
    }

    &__show-toggle {
        @extend %inner;

        grid-area: toggle;

        svg {
            height: 100%;
            width: 100%;

            color: get-color(secondary, 100),
        }
    }

    &__helper-text {
        @extend %base-helper-text;

        grid-area: helper;
    }
}