_m-select-custom.scss

@use "../01-abstract/variables" as *;
@use "f-get-svg-url" as *;
@use "m-rtl" as *;
@use "sass:color";

/**
 * Select custom
 *
 * @author Nicolas Langle
 *
 * Examples :
 *
 *      select {
 *          @include select-custom;
 *      }
 *
 */

@mixin select-custom {
    display: block;
    width: 100%;
    max-width: 100%; /* useful when width is set to anything other than 100% */
    padding: 15px 25px;
    margin: 0;
    font-size: 16px; // prevent iOS zoom
    line-height: 1.15;
    color: $color-text;
    background-color: $color-light;
    background-image: get-svg-url("down"), linear-gradient(to bottom, $color-light 0%, $color-light 100%);
    background-repeat: no-repeat, repeat;
    background-position: right 10px top 50%, 0 0;
    background-size: 10px auto, 100%;
    border: 1px solid $color-grey-500;
    border-radius: 10px;
    appearance: none;

    @include rtl {
        background-position: left 10px top 50%, 0 0;
    }

    // Set options to normal weight
    option {
        font-weight: 400;
    }

    // Hide arrow icon in IE browsers
    &::-ms-expand {
        display: none;
    }

    // Hover style
    &:hover {
        border-color: color.adjust($color-grey-500, $lightness: -10%);
    }

    // Focus style
    &:focus {
        color: color.adjust($color-text, $lightness: -10%);
        border-color: color.adjust($color-grey-500, $lightness: -20%);
        outline: none;
        box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
        box-shadow: 0 0 0 3px -moz-mac-focusring;

        option {
            outline: none;
        }
    }

    @include rtl {
        background-position: left 10px top 50%, 0 0;
    }
}