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

/**
 * A form input that accepts a single line of text.
 */


//
// SCSS imports
//

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


/**
 * Input
 */

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

    @include form-input-disabled;
    @include form-input-focus;
    @include form-input-placeholder;
    @include transition(('border-color', 'box-shadow'), var(--duration-sm));
    background-color: var(--input-bg);
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    box-shadow: var(--input-shadow);
    color: var(--input-color);
    display: block;
    min-height: var(--form-input-height);
    padding-left: var(--input-spacing-x);
    padding-right: var(--input-spacing-x);
    width: 100%;
}




/* MODIFIERS
   ========================================================================= */

/**
 * Input icon
 */

.input--icon {
    padding-left: var(--space-8);
}