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

/**
 * A form input used to select a value from a list of predefined options.
 */


//
// SCSS imports
//

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


/**
 * Select
 */

.select {
    --select-bg: var(--form-input-bg);
    --select-bg-size: var(--space-5);
    --select-border-color: var(--form-input-border-color);
    --select-border-radius: var(--form-input-border-radius);
    --select-border-width: var(--form-input-border-width);
    --select-color: var(--form-input-color);
    --select-height: var(--form-input-height);
    --select-shadow: var(--form-input-shadow);
    --select-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'), $transition-duration-sm);
    background-color: var(--select-bg);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.4 7c.3-.4.9-.4 1.2 0l4.4 4.3L14.4 7a.8.8 0 1 1 1.2 1.2l-5 5c-.3.3-.9.3-1.2 0l-5-5a.8.8 0 0 1 0-1.2Z' fill='%23667085'/%3E%3C/svg%3E");
    background-position: right var(--space-3) center;
    background-repeat: no-repeat;
    background-size: var(--select-bg-size);
    border: var(--select-border-width) solid var(--select-border-color);
    border-radius: var(--select-border-radius);
    box-shadow: var(--select-shadow);
    color: var(--select-color);
    display: block;
    min-height: var(--select-height);
    padding-left: var(--select-spacing-x);
    padding-right: calc(var(--select-spacing-x) * 2 + var(--select-bg-size));
    width: 100%;
}