/*! y-select - v2.1 - 04/05/2026
* By Yuval Ashkenazi
* https://github.com/yuvalAshkenaz/y-select */
.y-select-wrap {
	position: var( --y-select-wrap-position, relative );
	display: var( --y-select-wrap-display, block );
	width: var( --y-select-wrap-width, 100% );
}
.y-select-display {
	background: var( --y-select-display-bg, #fff );
	display: var( --y-select-display-display, flex );
	width: var( --y-select-display-width, 100% );
	height: var( --y-select-display-height, 52px );
	align-items: var( --y-select-display-align, center );
	padding: var( --y-select-display-padding, 0 46px 0 16px );
	border: var( --y-select-display-border, 1px solid #d1d5db );
	border-radius: var( --y-select-display-radius, 6px );
	color: var( --y-select-display-color, #1a1a1a );
	font-size: var( --y-select-display-font-size, 16px );
	cursor: var( --y-select-display-cursor, pointer );
	position: var( --y-select-display-position, relative );
	box-sizing: var( --y-select-display-box-sizing, border-box );
	transition: var( --y-select-display-transition, all 0.2s ease );
}
.y-select-display:hover {
	border-color: var( --y-select-display-border-hover, #9ca3af );
}
.y-select-display-inner {
	display: var(--y-select-display-inner-display, block);
	width: var(--y-select-display-inner-width, 100%);
	overflow: var(--y-select-display-inner-overflow, hidden);
	text-overflow: var(--y-select-display-inner-text-overflow, ellipsis);
	white-space: var(--y-select-display-inner-white-space, nowrap);
}
.y-select-display:focus-visible {
	outline: var( --y-select-display-outline-width, 2px )
			 var( --y-select-display-outline-style, solid )
			 var( --y-select-display-outline-color, #2563eb );
	outline-offset: var( --y-select-display-outline-offset, 2px );
	border-color: var( --y-select-display-border-focus, #2563eb );
}
.y-select-display::after {
	content: var( --y-select-arrow-content, "" );
	background: var( --y-select-arrow-bg, url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234b5563' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat );
	display: var( --y-select-arrow-display, block );
	width: var( --y-select-arrow-width, 12px );
	height: var( --y-select-arrow-height, 8px );
	position: var( --y-select-arrow-position, absolute );
	right: var( --y-select-arrow-right, 16px );
	left: var(--y-select-arrow-left, auto);
	top: var( --y-select-arrow-top, 50% );
	transform: var( --y-select-arrow-transform, translateY( -50% ) );
	transition: var( --y-select-arrow-transition, transform 0.2s ease );
}
.y-select-wrap.is-open .y-select-display::after {
	transform: var( --y-select-arrow-open-transform, translateY( -50% ) rotate( 180deg ) );
}
.y-select-list {
	background-color: var( --y-select-list-bg, #ffffff );
	display: var( --y-select-list-display, none );
	width: var( --y-select-list-width, 100% );
	position: var( --y-select-list-position, absolute );
	top: var( --y-select-list-top, calc( 100% + 8px ) );
	left: var( --y-select-list-left, 0 );
	z-index: var( --y-select-list-z, 100 );
	border: var( --y-select-list-border, 1px solid #e5e7eb );
	border-radius: var( --y-select-list-radius, 6px );
	box-shadow: var( --y-select-list-shadow, 0 10px 15px -3px rgba(0,0,0,0.1) );
	overflow: var( --y-select-list-overflow, hidden );
}
.y-select-wrap.is-open .y-select-list {
	display: var( --y-select-list-open-display, block );
}
.y-select-item {
	display: var( --y-select-item-display, block );
	padding: var( --y-select-item-padding, 12px 16px );
	color: var( --y-select-item-color, #4b5563 );
	font-size: var( --y-select-item-font-size, 15px );
	cursor: var( --y-select-item-cursor, pointer );
	transition: var( --y-select-item-transition, background 0.15s ease );
}
.y-select-item:hover,
.y-select-item.is-highlighted {
	background-color: var( --y-select-item-hover-bg, #f3f4f6 );
	color: var( --y-select-item-hover-color, #111827 );
}
.y-select-item[aria-selected="true"] {
	background-color: var( --y-select-item-selected-bg, #eff6ff );
	color: var( --y-select-item-selected-color, #2563eb );
	font-weight: var( --y-select-item-selected-weight, 500 );
}
.y-select-item-header {
	background-color: var( --y-select-header-bg, #f9fafb );
	color: var( --y-select-header-color, #9ca3af );
	font-size: var( --y-select-header-font-size, 12px );
	font-weight: var( --y-select-header-font-weight, 700 );
	text-transform: var( --y-select-header-transform, uppercase );
	letter-spacing: var( --y-select-header-spacing, 0.05em );
	pointer-events: var( --y-select-header-pointer, none );
}
@media ( max-width: 600px ) {
	.demo-grid {
		grid-template-columns: var( --y-select-demo-grid-columns, 1fr );
	}
}