@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;
}

.select,
select {
    @include select--base;
}

// /* Style select like a standard input */
// select {
//     -moz-appearance: none; /* Firefox 36+ */
//     -webkit-appearance: none; /* Chrome 41+ */
// }

// select::-ms-expand {
//     display: none; /* Internet Explorer 11+ */
// }

// select::-ms-value {
//     color: currentColor; /* Internet Explorer 11+ */
// }

// /// @group Form
// @mixin select {
//     background-color: var(--color_fill_primary);

//     padding-right: q(140);
//     cursor: pointer !important;
//     pointer-events: inherit !important;

//     // Inherit other input styles
//     @include input(
//         list.nth(map.get($input-size-map, "m"), 1),
//         list.nth(map.get($input-size-map, "m"), 2)
//     );

//     &option {
//         color: var(--color_text_primary);
//         background-color: var(--color_fill_primary);

//         &:hover {
//             background: hue_color("N2402");
//         }
//     }
// }

// select {
//     @include select;
// }

// select
// {
//     background-image: url('data:../image/svg+xml;utf8,<svg fill=\'%232d2d2d\' height=\'24\' viewBox=\'0 0 24 24\' width=\'24\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M7 10l5 5 5-5z\'/><path d=\'M0 0h24v24H0z\' fill=\'none\'/></svg>');
//     background-repeat: no-repeat;
//     background-position: right 0 bottom 50%;
//     background-size: q(16) q(16);
// }
// select.is-large
// {
//     background-image: url('data:../image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Cpath d=\'M32 46.8c-1.2 0-2.4-.4-3.4-1.3L1.8 20.3c-.7-.7-.7-1.8-.1-2.5.7-.7 1.8-.7 2.5-.1L31 42.9c.5.5 1.4.5 2 0l26.8-25.2c.7-.7 1.8-.6 2.5.1s.6 1.8-.1 2.5L35.4 45.4c-1 .9-2.2 1.4-3.4 1.4z\'/%3E%3C/svg%3E');
//     background-size: q(32) q(32);
// }

// /// ENGINE
// select[multiple] {
//     border: q(1) solid var(--color_text_primary);
//     width: 100%;
// }

// select[multiple] {
//     overflow: scroll;
//     overflow-y: scroll;
//     overflow-x: hidden;
// }