// ============================================================================
// 02-TOOLS -> MIXINS -> #FORM-INPUT-STATES
// ============================================================================

//
// SCSS imports
//

@use '../../01-settings' as *;
@use './transition' as *;


/// Form input disabled
/// 
/// Adds generic disabled styles to a form input.
/// 
/// @example scss
///   .class-name {
///     @include form-input-disabled;
///   }
/// 
/// @access public

@mixin form-input-disabled {
    &:disabled,
    &[aria-disabled=true] {
        background-color: var(--form-input-disabled-bg);
        color: var(--form-input-disabled-color);
        cursor: not-allowed;;
    }
}


/// Form input focus
/// 
/// Adds generic focus styles to a form input.
/// 
/// @example scss
///   .class-name {
///     @include form-input-focus;
///   }
/// 
/// @access public

@mixin form-input-focus {
    &:focus {
        border-color: var(--form-input-focus-border-color); 
        box-shadow: 0 0 0 var(--form-input-focus-ring-width) var(--form-input-focus-ring-color);
        outline: 0;
    }
}


/// Form input placeholder
/// 
/// Adds generic placeholder styles to a form input.
/// 
/// @example scss
///   .class-name {
///     @include form-input-placeholder;
///   }
/// 
/// @access public

@mixin form-input-placeholder {
    &::placeholder {
        color: var(--form-input-placeholder-color);
    }
}
