////
///
/// Input List Mixins
/// ===========================================================================
///
/// Mixins for styling input elements with datalists.
///
/// @group Mixins.BodyAtoms.Inputs
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.2.10
/// @access public
///
////

@use "../../../variables" as *;

@mixin input--list {
    padding: baseline(1);
    border: q(1) solid var(--color_text_primary);
    background-color: var(--color_fill_primary);
    color: var(--color_text_default);
    border-radius: q(4);
    font-size: baseline(3);
    width: 100%;
    pointer-events: initial;
    cursor: text;

    &:focus {
        outline: none;
        border-color: var(--color_text_primary);
        box-shadow: 0 0 0 q(2) rgba(var(--color_primary-rgb), 0.2);
    }

    &::-webkit-calendar-picker-indicator {
        display: none; // hides the native dropdown arrow
    }
}