.textarea-wrapper::after {
    content: attr(chars-left) " characters left";
    display: block;
    color: var(--slate-500);
    font-size: 12px;
    margin-top: 10px;
}

textarea {
    padding: 8px;
    border: 1px solid var(--slate-300);
    background-color: var(--slate-100);
    border-radius: 0.2rem;
    color: var(--slate-900);
    transition: all 0.2s ease; // Smooth hover/focus transitions
    resize: vertical; // Allow vertical resize only (better UX)

    &::placeholder {
        color: var(--slate-500);
        opacity: 1; // More consistent across browsers
    }

    &:focus {
        outline: 2px solid var(--indigo-500);
        background-color: var(--slate-50);
    }

    &:hover {
        border-color: var(--slate-400);
        background-color: var(--slate-50);
    }

    &:disabled {
        background-color: var(--slate-200);
        border-color: var(--slate-300);
        color: var(--slate-500);
        cursor: not-allowed;

        &::placeholder {
            color: var(--slate-400);
        }
    }

    &:read-only {
        background-color: var(--slate-200);
        border-style: dashed;
        color: var(--slate-700);
        cursor: default;
    }

    &:required {
        border-left: 4px solid var(--indigo-500);
    }

    &[aria-invalid="true"] {
        background-color: var(--rose-50);
        border-color: var(--rose-500);
        border-width: 2px;
        outline: none;

        &::placeholder {
            color: var(--rose-500);
        }
    }

    &[aria-invalid="false"] {
        background-color: var(--emerald-50);
        border-color: var(--emerald-500);
        border-width: 2px;
        outline: none;

        &::placeholder {
            color: var(--emerald-500);
        }
    }

    // Dark Mode
    html.dark & {
        background-color: var(--slate-800);
        border-color: var(--slate-700);
        color: var(--slate-100);

        &::placeholder {
            color: var(--slate-400);
        }

        &:hover {
            border-color: var(--slate-500);
            background-color: var(--slate-700);
        }

        &:focus {
            outline: 2px solid var(--indigo-400);
            background-color: var(--slate-700);
        }

        &:disabled {
            background-color: var(--slate-900);
            border-color: var(--slate-800);
            color: var(--slate-600);

            &::placeholder {
                color: var(--slate-600);
            }
        }

        &:read-only {
            background-color: var(--slate-900);
            border-style: dashed;
            color: var(--slate-400);
        }

        &[aria-invalid="true"] {
            background-color: var(--rose-950);
            border-color: var(--rose-500);

            &::placeholder {
                color: var(--rose-400);
            }
        }

        &[aria-invalid="false"] {
            background-color: var(--emerald-950);
            border-color: var(--emerald-500);

            &::placeholder {
                color: var(--emerald-400);
            }
        }
    }
}
