/* ---------------------------------------------------- */
/* --- Text Area Component Styles --- */
/* ---------------------------------------------------- */

.text-area-field {
    padding: 7px 8px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background-color: var(--color-background);
    color: var(--color-text-dark);
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
    resize: vertical;
    /* min-height: 80px; */
}

.text-area-field:focus {
    border-color: var(--color-primary);
}

.text-area-field.text-area-large {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
}

.text-area-field::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.6;
}

.text-area-field:disabled {
    background-color: var(--color-background-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}