/**
 * AutoSelect je flexibilní a responzivní náhrada standardního formulářového
 * prvku <select> (vč. varianty multiple) ve webové stránce. Je vytvořen 
 * v čistém jazyce JavaScript a dynamicky nahradí (překryje, neodstraní)
 * původní <select>, přičemž převezme jeho položky a na pozadí s ním pracuje.
 * V AutoSelect můžete využít práci s klávesnicí, jako je pohyb šipkami
 * v seznamu, omezit výběr položek postupným psaním, Enter potvrzuje položku,
 * mezerník označuje položky v multiselect, atd.
 * Funkce je možné importovat jako modul (má export na konci souboru).
 * AutoSelect je závislý na knihovně Bootstrap 5.3.3 a vyšší.
 * 
 * @author  Michal Kašpárek <michal@ikasparek.cz>
 * @copyright (c) 2025 Michal Kašpárek (https://ikasparek.cz)
 */


/** import ikon-font z Bootstrap. Pokud již importujete dříve, můžete zakomentovat. */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');


/** styly pro AutoSelect */
form select.select-autoselect {
	outline: 0;

	&.hide {
		height: 1px !important;
		width: 1px !important;
		border: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		margin: 0 !important;
		white-space: nowrap !important;
	}
}

.dropdown-box {
	display: block;
	position: relative;
	left: 0;

	&.active {
		display: block;
	}

	& *[name$='_autoselect_control'] {
		position: relative;
		min-height: 2.37rem;
		cursor: pointer;
		background: white url(./chevron.svg) 96% no-repeat;
		field-sizing: content;
		resize: none;
	}

	& *[name$='_autoselect_control'].first-red::placeholder,
	& *[name$='_autoselect_control'].text-danger::placeholder {
		--bs-text-opacity: 1;
		color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
	}

	& *[name$='_autoselect_control'].text-body::placeholder {
		--bs-text-opacity: 1;
		color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
	}

	& *[name$='_autoselect_control'] .badge {
		--bs-badge-font-weight: 500;
	}

	& > div[name$='_autoselect_control']::before {
		content: attr(data-placeholder);
	}

	& *[name$='_autoselect_control']:disabled,
	& *[name$='_autoselect_control'][disabled],
	& *[name$='_autoselect_control'].disabled {
		background-color: var(--bs-secondary-bg);
		color: rgb(128, 128, 128);
		cursor: default;
		pointer-events: none;
	}

	& .dropdown-content {
		/* position: fixed; /*absolute  -> přesunuto přímo do html-class*/
		display: none;
		width: 100%;
		background-color: var(--bs-light);
		box-shadow: .1rem .1rem 1rem rgba(0, 0, 0, .2);
		border-radius: .5rem;
		padding: 0.5rem;
		z-index: 1;
	}

	& .dropdown-content.active {
		display: block;
	}

	& .dropdown-content .search-input {
		position: relative;
		display: flex;
		justify-content: space-between;
	}

	& .dropdown-content .search-input input {
		position: relative;
	}

	& .dropdown-content .search-input input::placeholder,
	& .dropdown-content .search-input input:placeholder-shown {
		color: var(--bs-tertiary-color);
	}

	& .dropdown-content .search-input input:focus {
		outline: none;
		box-shadow: none;
	}

	& .dropdown-content .search-input .autoselect-boxcloser {
		position: relative;
		display: block;
		width: 2rem;
		height: 2rem;
		cursor: pointer;
	}

	& .dropdown-content .search-input .autoselect-boxcloser .autoselect-boxcloser-title {
		position: absolute;
		display: none;
		top: 1.9rem;
		left: -100%;
		width: 6.5rem;
		height: 1.7rem;
		padding: 0.2rem 0.6rem;
		background-color: #495057;
		color: #eaeaea;
		font-size: .8em;
		border-radius: .2rem;
	}

	& .dropdown-content .search-input .autoselect-boxcloser:hover .autoselect-boxcloser-title {
		display: block;
	}

	& .dropdown-content .search-input .autoselect-boxcloser .autoselect-boxcloser-title::after {
		content: 'Vymazat/zavřít';
	}

	& .dropdown-content .search-input .autoselect-boxcloser::after {
		content: '\2715';
		display: block;
		height: 2rem;
		width: 2rem;
		padding: 10% 20% 10% 30%;
		color: rgba(var(--bs-body-color-rgb), .9);
	}

	& .dropdown-content .search-input .autoselect-boxcloser:hover:after {
		color: rgba(var(--bs-body-color-rgb), .7);
	}

	& .dropdown-content .search-ul {
		padding: 0;
		max-height: 15rem;
		overflow: auto;
	}

	& .dropdown-content .search-ul li {
		padding: .1rem 1rem;
		cursor: pointer;
		color: rgba(var(--bs-body-color-rgb), 1);
	}

	& .dropdown-content .search-ul li.hide {
		display: none;
	}

	& .dropdown-content .search-ul li input[type="checkbox"] {
		margin-right: 1rem;
	}

	& .dropdown-content .search-ul li label {
		color: rgba(var(--bs-body-color-rgb), 1);
		cursor: pointer;
	}

	& .dropdown-content .search-ul li.selected,
	& .dropdown-content .search-ul li:hover,
	& .dropdown-content .search-ul li:focus {
		background-color: rgba(0, 0, 0, .05);
		outline: none;
	}
}