$select-arrow: "M15.6,0.4c-0.5-0.5-1.3-0.5-1.8,0L8,6L2.2,0.4c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.7l6.7,6.5 c0.5,0.5,1.3,0.5,1.8,0l6.7-6.5C16.1,1.6,16.1,0.8,15.6,0.4z";

$select-hover-state: #eee;
$select-selected-state: #ccc;
$bdr-rad:  0.25rem;
$select-color: #333;

select {
	z-index: 1;
	background: none;
	appearance: none;
	padding: 0.75rem;
	padding-right: 2.5rem;
	border: 1px solid #ddd;
	border-radius: $bdr-rad;
	display: block;

	&::-ms-expand {
		display: none;
	}
}

.select-enhance {
	position: relative;
    width: auto;
    display: inline-block;  
	border:1px solid;

	select {
		border: 0;
	}

	&:after {
		content: " ";
		display: block;
		position: absolute;
		inset: calc(50% - 0.3125rem) 0.75rem auto auto;
		z-index: 10;
		width: 1rem;
		height: 0.625rem;
		clip-path: path($select-arrow);
		background-color: #000;
		transition: transform 200ms ease;
	}

	&__enable-text {
		appearance: none;
		border: 0;
		padding:0;
		margin: 0;
		border-radius: 0;
		background: transparent;
		width: 100%;
		height: 100%;
		display: block;
		inset: 0;
		position: absolute;
		z-index: 100;
		overflow: hidden;
		text-indent: -999rem !important;
		color: transparent !important;
		font-size: 1rem;//to keep IOS from zooming
	}

	&__list-btn {
		position: relative;
		appearance: none;
		background: $white;
		display: block;
		// visibility: hidden;
		width: 100%;
		padding: 0.5rem 1.25rem;
		text-align: left;
		border: 1px solid #ddd;
		color: $select-color;
		font-weight: normal;

		&:not(:first-child) {
			margin-top: -1px;
		}

		&:focus,
		&:hover {
			background: $select-hover-state;
			z-index: 3;
		}

		&[aria-selected="true"] {
			background: $select-selected-state;
			border-color: #999;
			z-index: 2;
		}

		&:last-child {
			border-radius: 0 0 $bdr-rad $bdr-rad;
		}
	}

	&__list {
		border-radius: $bdr-rad;
		visibility: hidden;
		list-style: none;
		padding: 0;
		margin: 0;
		position: absolute;
		left: -9999rem;
		top: 100%;
		background: #fff;
		margin-top: 0;
		z-index: 1000;
		box-shadow: 0 0.25rem 0.5rem rgba($black, 0.25);
		transition: opacity 250ms ease, transform 250ms ease;
		opacity: 0;
		transform: scale3d(0.8, 0.8, 0.8);
		transform-origin: top center;
		max-height: 20rem;
		overflow: auto;

        &--focused {
            visibility: visible; 
            opacity: 1;
			transform: scale3d(1, 1, 1);
        }

        &--blurring {
            visibility: visible; 
            opacity: 0;
        }
	}

    &__optgroup {
        padding: 0.5rem; 
        background: #fff;
        
		&-label {
            
			font-weight: bold;
            display: block;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }
    }

	&--empty-val {
		select {
			color: #999;
		}
	}

	&--pos-bottom {
		.select-enhance {
			&__list {
				top: auto;
				bottom: 100%;
				margin-bottom: 0;
				margin-top: 0;
				transform-origin: bottom center;
				box-shadow: 0 -0.25rem 0.5rem rgba($black, 0.25);

			}

			&__list-btn {
				&:first-child {
					border-radius: $bdr-rad $bdr-rad 0 0;
				}
				&:last-child {
					border-radius: 0;
				}
			}
		}
	}

	// &--focused,
	// &--blurring {
	// 	.select-enhance {
	// 		&__list {
	// 			visibility: visible; 
	// 			$side: 0;

	// 			left: $side;
	// 			right: $side;
	// 		}

	// 		&__list-btn {
	// 			visibility: visible;
	// 		}
	// 	}
	// }

	&--focused {
		z-index: 1000;
		&:after {
			transform: rotateX(-180deg);
		}
	}
}