@import "./variables";

/**
 * Dropdown sort style
 */
.vp-sort__style-dropdown {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vp-sort-dropdown--items__gap);

	select {
		display: block;
		flex: 0 0 auto;
		min-width: var(--vp-sort-dropdown--items__min-width);
		max-width: 100%;
		height: var(--vp-sort-dropdown--items__height);
		min-height: var(--vp-sort-dropdown--items__min-height);
		padding: var(--vp-sort-dropdown--items__padding-v) var(--vp-sort-dropdown--items__padding-h);
		padding-right: calc(var(--vp-sort-dropdown--items__padding-right) + var(--vp-sort-dropdown--items__arrow-size));
		font-size: var(--vp-sort-dropdown--items__font-size);
		font-weight: var(--vp-sort-dropdown--items__font-weight);
		line-height: var(--vp-sort-dropdown--items__line-height);
		color: var(--vp-sort-dropdown--items__color);
		text-decoration: var(--vp-sort-dropdown--items__text-decoration);
		text-transform: var(--vp-sort-dropdown--items__text-transform);
		letter-spacing: var(--vp-sort-dropdown--items__letter-spacing);
		background-color: var(--vp-sort-dropdown--items__background-color);
		background-image: var(--vp-sort-dropdown--items__arrow);
		background-repeat: no-repeat;
		background-position: right var(--vp-sort-dropdown--items__padding-right) center;
		background-size: var(--vp-sort-dropdown--items__arrow-size);
		border: none;
		border-radius: var(--vp-sort-dropdown--items__border-radius);
		transition: var(--vp-sort-dropdown-transition-duration) background-color var(--vp-sort-dropdown-transition-easing), var(--vp-sort-dropdown-transition-duration) color var(--vp-sort-dropdown-transition-easing);
		appearance: none;

		&:hover,
		&:focus {
			color: var(--vp-sort-dropdown--items-hover__color);
			background-color: var(--vp-sort-dropdown--items-hover__background-color);
		}
	}
}