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