/* ============================================================================
   06-COMPONENTS -> #TEXTAREA
   ========================================================================= */

/**
 * A form input that accepts multiple lines of text.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Textarea
 *
 * 1. Set 'resize' to 'vertical' to stop the textarea being horizontally 
 *    dragged out of its container.
 */

.textarea {
    --textarea-bg: var(--form-input-bg);
    --textarea-bg-size: var(--space-5);
    --textarea-color: var(--form-input-color);
    --textarea-border-color: var(--form-input-border-color);
    --textarea-border-radius: var(--form-input-border-radius);
    --textarea-border-width: var(--form-input-border-width);
    --textarea-height: var(--form-input-height);
    --textarea-shadow: var(--form-input-shadow);
    --textarea-spacing-x: var(--form-input-padding-x);
    --textarea-spacing-y: var(--form-input-padding-y);

    @include form-input-disabled;
    @include form-input-focus;
    @include form-input-placeholder;
    @include transition(('border-color', 'box-shadow'), $transition-duration-sm);
    background-color: var(--textarea-bg);
    border: var(--textarea-border-width) solid var(--textarea-border-color);
    border-radius: var(--textarea-border-radius);
    color: var(--textarea-color);
    display: block;
    padding: var(--textarea-spacing-y) var(--textarea-spacing-x);
    resize: vertical; // [1]
    width: 100%;
}