@import 'vendors/select2.css';

.select2-container {
	width: 100%;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
	background-color: var(--mp-input-bg-color);
	border: var(--mp-input-border-width) var(--mp-input-border-style)
		var(--mp-input-border-color);
	border-radius: var(--mp-input-border-radius);
	box-shadow: var(--mp-input-box-shadow);
	color: var(--mp-input-color);
	font-size: var(--mp-input-font-size);
	line-height: var(--mp-input-line-height);
	min-height: round(1lh + (var(--mp-input-padding-block) + var(--mp-input-border-width)) * 2, 1px);
	transition: var(--mp-input-transition);
}

.select2-container .select2-selection--single {
	height: auto;
}

.select2-container .select2-selection--single .select2-selection__rendered {
	color: inherit;
	line-height: var(--mp-input-line-height);
	padding-block: var(--mp-input-padding-block);
	padding-inline: var(--mp-input-padding-inline)
		calc(
			var(--mp-input-padding-inline) +
			var(--mp-input-gap) +
			var(--mp-select-icon-size)
		);
}

.select2-container .select2-selection--single .select2-selection__placeholder {
	color: color-mix(
		in var(--mp-color-space),
		var(--mp-input-placeholder-color)
			calc(var(--mp-input-placeholder-color-opacity) * 100%),
		transparent
	);
}

.select2-container .select2-selection--single .select2-selection__clear {
	color: var(--mp-color-gray-dark);
	margin-inline-end: var(--mp-input-gap);
}

.select2-container .select2-selection--single .select2-selection__arrow {
	background: var(--mp-select-icon) no-repeat center / var(--mp-select-icon-size);
	height: var(--mp-select-icon-size);
	inset-block: 50%;
	inset-inline-end: var(--mp-select-icon-offset-end);
	position: absolute;
	translate: 0 -50%;
	width: var(--mp-select-icon-size);
}

.select2-container .select2-selection--single .select2-selection__arrow b {
	display: none;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
	border-color: var(--mp-focus-outline-color);
	box-shadow: var(--mp-input-focus-box-shadow);
	outline: 0;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
	background-color: var(--mp-input-disabled-bg-color);
	border-color: var(--mp-input-disabled-border-color);
	color: var(--mp-input-disabled-color);
	cursor: var(--mp-disabled-cursor);
	opacity: var(--mp-input-disabled-opacity);
}

.select2-container--default .select2-selection--multiple {
	cursor: text;
	padding-block: calc(var(--mp-input-padding-block) * 0.5);
	padding-inline: calc(var(--mp-input-padding-inline) * 0.5);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--mp-input-gap) * 0.5);
	padding: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--mp-color-light);
	border: var(--mp-border-width) var(--mp-border-style) var(--mp-border-color);
	border-radius: var(--mp-border-radius-small);
	margin: 0;
	padding-block: calc(var(--mp-input-padding-block) * 0.25);
	padding-inline: calc(var(--mp-input-padding-inline) * 0.5);
}

.select2-dropdown {
	background-color: var(--mp-body-bg-color);
	border: var(--mp-input-border-width) var(--mp-input-border-style)
		var(--mp-input-border-color);
	border-radius: var(--mp-input-border-radius);
	box-shadow: var(--mp-box-shadow);
	color: var(--mp-body-color);
	font-size: var(--mp-input-font-size);
	z-index: var(--mp-custom-select-z-index, var(--mp-z-index-popover));
}

.select2-search--dropdown {
	padding: var(--mp-spacer-50);
}

.select2-search--dropdown .select2-search__field {
	background-color: var(--mp-input-bg-color);
	border: var(--mp-input-border-width) var(--mp-input-border-style)
		var(--mp-input-border-color);
	border-radius: var(--mp-input-small-border-radius);
	box-shadow: var(--mp-input-box-shadow);
	color: var(--mp-input-color);
	line-height: var(--mp-input-line-height);
	padding-block: calc(var(--mp-input-padding-block) * 0.75);
	padding-inline: calc(var(--mp-input-padding-inline) * 0.75);
	transition: var(--mp-input-transition);
}

.select2-search--dropdown .select2-search__field:focus {
	border-color: var(--mp-focus-outline-color);
	box-shadow: var(--mp-input-focus-box-shadow);
	outline: 0;
}

.select2-results__options {
	max-height: var(--mp-custom-select-results-max-height, 16rem);
	overflow-y: auto;
}

.select2-results__option {
	padding-block: calc(var(--mp-input-padding-block) * 0.75);
	padding-inline: var(--mp-input-padding-inline);
}

.select2-container--default .select2-results__option[aria-disabled='true'] {
	color: var(--mp-input-disabled-color);
	opacity: var(--mp-input-disabled-opacity);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--mp-color-primary);
	color: var(--mp-color-primary-contrast, var(--mp-color-white));
}

.select2-container--default .select2-results__option[aria-selected='true'],
.select2-container--default .select2-results__option[data-selected='true'] {
	background-color: var(--mp-color-primary-subtle);
	color: var(--mp-body-color);
}

.select2-container--default .select2-results__group {
	color: var(--mp-color-gray-dark);
	font-weight: var(--mp-font-weight-medium);
	padding-block: calc(var(--mp-input-padding-block) * 0.75);
	padding-inline: var(--mp-input-padding-inline);
}

.select2--small {
	font-size: var(--mp-input-small-font-size);
}

.select2--small .select2-selection--single,
.select2--small .select2-selection--multiple {
	border-radius: var(--mp-input-small-border-radius);
}

.select2--small .select2-selection--single .select2-selection__rendered,
.select2--small .select2-results__option,
.select2--small .select2-search--dropdown .select2-search__field {
	padding-block: calc(var(--mp-input-padding-block) * 0.75);
	padding-inline: calc(var(--mp-input-padding-inline) * 0.75);
}

.select2-container--default
	.select2-selection--multiple
	.select2-search--inline
	.select2-search__field {
	margin-block-start: 0;
	min-height: 1lh;
}