.textarea {
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: var(--transition-easeinout-fast);

    & > textarea {
        resize: none;

        overflow: hidden;

        min-height: 2.25rem;
        padding: 0.25rem 0.75rem;
        border: var(--bdr-input);
        border-radius: var(--bdr-rounded);

        outline: none;
        box-shadow: var(--shadow-mid);
    }

    & > label {
        user-select: none;
        padding: 0.5rem;
        font-weight: bold;
        transition: var(--transition-easeinout-fast);

        .textarea:has(textarea:hover) & {
            transform: translateY(-1px);
            color: var(--clr-primary-light);
        }

        .textarea:has(textarea:focus) & {
            transform: translateY(1px);
            color: var(--clr-primary-dark);
        }

        .textarea:has(textarea:disabled) & {
            color: var(--clr-black);
        }
    }

    /* Error Message */
    & > .error-message {
        min-height: 1.5rem;
        padding: 0.25rem 0.5rem 0;
        border-left: 3px solid transparent;

        font-size: 0.875rem;
        font-style: italic;
        color: var(--clr-input-error);

        transition: var(--transition-easeinout-fast);

        &:not(.hidden) {
            border-left-color: var(--clr-input-error);
            background-color: color-mix(
                in srgb,
                var(--clr-input-error) 5%,
                transparent
            );
            animation: var(--animation-pulse);
        }

        .textarea:has(textarea:hover) & {
            transform: translateY(-1px);
        }

        .textarea:has(textarea:focus) & {
            transform: translateY(1px);
        }
    }

    &:has(textarea:hover),
    &:has(label:hover) {
        transform: translateY(-1px);

        & > textarea {
            border-color: var(--clr-primary-light);
            box-shadow: var(--shadow-high);
        }

        & > div > label {
            color: var(--clr-primary-light);
        }
    }

    &:has(textarea:focus),
    &:has(label:focus) {
        transform: translateY(1px);

        & > textarea {
            border-color: var(--clr-primary-dark);
            box-shadow: var(--shadow-low);
        }

        & > div > label {
            color: var(--clr-primary-dark);
        }
    }

    &:has(textarea:disabled) {
        cursor: not-allowed;
        transform: unset;

        & > textarea {
            cursor: not-allowed;
            border: var(--bdr-input);
            background-color: var(--clr-bg-disabled);
            box-shadow: var(--shadow-mid);
        }

        & > div > label {
            cursor: not-allowed;
            color: var(--clr-black);
        }
    }
}