/**
 * Usage
 *
 * <p class="form__group">
 *     <input type="text" id="input" class="form__text" required>
 *     <label class="form__label form__label--floating" for="input"></label>
 *     @error('error')
 *         <span class="form__hint">{{ $error }}</span>
 *     @enderror
 * </p>
 */

.form__text {
    background-color: inherit;
    border: var(--input-text-border);
    border-radius: var(--input-text-border-radius);
    color: var(--input-text-fg);
    font-size: 14px;
    font-weight: normal;
    height: 40px;
    max-width: 100%;
    outline: none;
    padding: var(--input-text-padding);
    width: 100%;

    @media screen and (prefers-reduced-motion: no-preference) {
        transition:
            border-color 600ms cubic-bezier(0.25, 0.8, 0.25, 1),
            height 600ms cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    &:hover {
        border: var(--input-text-border-hover);
        padding: var(--input-text-padding-hover);
    }

    &:focus,
    &:focus:hover {
        border: var(--input-text-border-active);
        padding: var(--input-text-padding-active);

        & + .form__label--floating {
            top: -5px;
            font-size: 11px;
            color: var(--label-fg-active);
            border-radius: 0;
            padding: 0 4px;
        }
    }

    &:valid:not(:placeholder-shown),
    &:focus:placeholder-shown,
    &:read-only,
    &[type='date'][required] {
        & + .form__label--floating {
            top: -5px;
            font-size: 11px;
            border-radius: 0;
            padding: 0 4px;
        }
    }

    &:invalid:focus,
    &:user-invalid {
        border: var(--input-text-border-error);

        & + .form__label--floating {
            color: var(--label-fg-error);
        }

        & ~ .form__hint {
            color: var(--label-fg-error);
        }
    }

    & ~ .form__hint {
        display: block;
        color: var(--label-fg);
        font-size: 12px;
        margin-left: 16px;
    }
}
