/* Input */
.componentInputSearchable .input {
	position: relative; border-radius: 28px; overflow: hidden;
	box-shadow: 0 2px 4px 2px rgba(0, 1, 3, 0.13);
}
.componentInputSearchable .input:before {
	content: ''; position: absolute; inset: 0; border-radius: 28px; padding: 2px;
	background: linear-gradient(10deg, var(--color-main) 20%, transparent 70%);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude; pointer-events: none;
}
.componentInputSearchable .input.active:before {
	background: linear-gradient(10deg, var(--color-main) 50%, transparent 100%);
}
.componentInputSearchable .input.active .options {display: block;}

/* Toolbar */
.componentInputSearchable .toolbar {display: flex; align-items: center; height: 56px;}
.componentInputSearchable .toolbar label {display: flex; align-items: center; width: 100%;}
.componentInputSearchable.insertable .toolbar label {width: calc(100% - 142px);}
.componentInputSearchable .toolbar label i {
	width: 3rem; height: 56px; line-height: 58px; text-align: center; font-size: 1rem; color: #555;
}
.componentInputSearchable .toolbar label input {
	height: 56px !important; margin: 0; padding: 0; border: 0; box-shadow: none;
}
.componentInputSearchable .toolbar label input.selected:not(:focus)::placeholder {color: black;}
.componentInputSearchable .toolbar button {
	display: none; width: 110px; height: 30px; margin: 0 auto 0 1rem; line-height: 2rem !important;
	background-color: var(--color-accent); font-weight: normal; font-size: 1rem; color: white;
}
.componentInputSearchable .toolbar button:hover {background-color: var(--color-accent-darker);}

/* Options */
.componentInputSearchable .options {
	display: none; height: 202px; overflow-y: auto; overflow-x: hidden; margin: 0; padding-bottom: 2px;
}
.componentInputSearchable .options::-webkit-scrollbar-track {border-radius: 0 28px 0 0;}
.componentInputSearchable .options::-webkit-scrollbar-thumb {border-radius: 0 28px 0 28px;}
.componentInputSearchable .options li {
	height: 2.5rem; padding: 0 1rem; overflow: hidden;
	line-height: 2.5rem; font-size: 1.2rem; cursor: pointer;
	user-select: none; -moz-user-select: none; -webkit-user-select: none;
}
.componentInputSearchable .options li:hover,
.componentInputSearchable .options li.hover {background-color: #f5f5f5;}
.componentInputSearchable .options li.group {background-color: var(--color-main-lightest); font-weight: bold; cursor: default;}
.componentInputSearchable .options li.selected {background-color: var(--color-main-lighter); color: white;}
.componentInputSearchable .options li + li {border-top: 1px solid var(--color-main-lightest);}

/* Values */
.componentInputSearchable .values {display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem;}
.componentInputSearchable .values div {
	display: flex; align-items: center; height: 2.5rem; padding-left: 1rem; border-radius: 20px;
	background-color: var(--color-main-lighter); line-height: 2.5rem; font-size: 1rem; color: white;
}
.componentInputSearchable .values div.new {
	border: 1px solid var(--color-main-lighter); background-color: white; color: var(--color-main-lighter);
}
.componentInputSearchable .values i {width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center;}
.componentInputSearchable .values i.fa-times:hover {font-weight: bold; color: orangered; cursor: pointer;}
.componentInputSearchable .values span {user-select: none; -moz-user-select: none; -webkit-user-select: none;}

/* Popup insert */
.componentInputSearchable-insert {padding: 2px; border-radius: 0; box-shadow: none;}
.componentInputSearchable-insert .popup {
	display: flex; flex-direction: column; align-items: center;
	height: 254px; padding: 1rem; border-radius: 27px; overflow: hidden;
	background: linear-gradient(#ffffffdd 0%, white 80%);
}
.componentInputSearchable-insert .popup .confirm {
	display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 4rem; font-size: 1rem;
}
.componentInputSearchable-insert .popup .confirm b {
	padding: 5px; border-radius: 5px; background-color: var(--color-accent-lightest);
}
.componentInputSearchable-insert .popup .error {
	margin-top: 1rem; text-align: center; font-size: 1rem; color: orangered;
}
.componentInputSearchable-insert .popup .buttons {
	display: flex; justify-content: space-between; width: 100%;
	margin-top: auto; border-top: 1px solid var(--color-main-light);
}
.componentInputSearchable-insert .popup .buttons button {
	width: 50%; height: 60px; line-height: 60px; font-size: 1.2rem; cursor: pointer;
}
.componentInputSearchable-insert .popup .buttons button:hover {background-color: var(--color-main-lightest);}
.componentInputSearchable-insert .popup .buttons button.submit {border-radius: 0 0 12px 0; color: var(--color-accent);}
.componentInputSearchable-insert .popup .buttons button.cancel {border-radius: 0 0 0 12px; color: #888;}