@use "sass:map";
@use "sass:list";

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

@use "../../soul_type" as *;
@use "input" as *;

// Select
// ----------------------------------------------------------------------------

/// @group Form
@mixin select--base {
    @include input--base;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    cursor: pointer;

    // Normalize native select rendering
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    // Optional icon support (set --select-icon to a url(...) value)
    background-image: var(--select-icon, none);
    background-repeat: no-repeat;
    background-position: right q(12) center;
    background-size: q(16) q(16);
    padding-right: var(--select-padding-right, #{q(36)});
}

@mixin select {
    @include select--base;
}

/// Select with default dropdown arrow icon
/// @group Form
@mixin select--with-arrow {
    @include select--base;
    font-family: inherit;
    font-size: q(14);
    padding-left: q(8);
    padding-right: q(32);
    background-color: var(--color_fill_primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right q(10) center;
    background-size: q(12);
}

/// Style for select option elements (limited browser support)
/// @group Form
@mixin select__option {
    font-family: inherit;
    font-size: q(14);
    font-weight: normal;
    padding: q(8) q(12);
    background-color: var(--color_fill_primary);
    color: var(--color_text_primary);

    &:checked,
    &:hover {
        background-color: var(--color_accent_primary);
        color: var(--color_fill_primary);
    }

    &:disabled {
        color: var(--color_state_muted);
    }
}

/// Style for select optgroup elements
/// @group Form
@mixin select__optgroup {
    font-family: inherit;
    font-weight: 600;
    font-style: normal;
    background-color: var(--color_fill_secondary);
}