/**
 * Usage
 *
 * <p class="form__group">
 *     <textarea id="textarea" class="form__textarea" placeholder=" "></textarea>
 *     <label class="form__label form__label--floating" for="textarea"></label>
 *     @error('error')
 *         <span class="form__hint">{{ $error }}</span>
 *     @enderror
 * </p>
 */

.form__textarea {
    background-color: inherit;
    border: var(--textarea-border);
    border-radius: var(--textarea-border-radius);
    color: var(--textarea-fg);
    font-size: 14px;
    font-weight: normal;
    max-width: 100%;
    outline: none;
    padding: var(--textarea-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);
    }

    @supports (field-sizing: content) {
        field-sizing: content;
        max-height: calc(85vh - /* top-nav */ 48px - /* secondary-nav */ 30px);
    }

    @supports not (field-sizing: content) {
        height: 40px;

        &:focus,
        &:focus:hover {
            height: 140px;
        }

        &:valid:not(:placeholder-shown),
        &:focus:placeholder-shown {
            height: 140px;
        }
    }

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

    &:focus,
    &:focus:hover {
        border: var(--textarea-border-active);
        padding: var(--textarea-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 {
        & ~ .form__label--floating {
            top: -5px;
            font-size: 11px;
            border-radius: 0;
            padding: 0 4px;
        }
    }

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

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

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