/*--------------------------------------------------
---- Form: ordinamento archivi ---------------------
--------------------------------------------------*/

#content-controls {
	display: inline-block;
	inline-size: fit-content;
	margin: 0;
	max-width: max-content;
	position: absolute;
	right: 2rem; /* 16px */
	top: 2.25rem; /* 36px */
	width: fit-content;
}

#content-controls fieldset {
	border: 0;
	display: inline-block;
	margin: 0;
	min-inline-size: 0;
	padding: 0;
	width: max-content;
}

#content-controls legend {
	display: none;
}


/*--------------------------------------------------
---- Icone delle select ----------------------------
--------------------------------------------------*/

#content-controls .field-icon {
	display: inline-block;
	font-size: 0;
	margin-right: -45px;
	position: relative;
	vertical-align: middle;
	z-index: 1;
}

#content-controls .field-icon--md {
	height: 40px;
	width: 40px;
}

#content-controls .field-icon::before {
	align-items: center;
	color: var(--anad-color-primary);
	display: flex;
	font-family: dashicons;
	font-size: 1rem; /* 16px */
	height: 100%;
	justify-content: center;
	left: 0;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
}

#content-controls .icon--sort::before {
	content: "\f156";
	transition: transform 0.35s ease;
}

#content-controls .icon--tag::before,
#content-controls .icon--service::before {
	content: "\f323";
}

#content-controls .icon--sort:has(+ select:is(:hover, :focus))::before {
	transform: rotate(360deg);
}


/*--------------------------------------------------
---- Select e pulsanti -----------------------------
--------------------------------------------------*/

#content-controls select,
#content-controls .to-edit-collection,
#content-controls .to-edit-search,
#content-controls .to-exit-search,
#content-controls .to-print,
#content-controls .to-reset-search,
#content-controls .to-tools {
	display: inline-block;
	vertical-align: middle;
}

#content-controls select {
	appearance: none;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23181f49' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 6.646a.5.5 0 0 1 .708 0L8 10.293l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
	background-position: right 1rem center;
	background-repeat: no-repeat;
	border: 0;
	border-radius: 9999px;
	box-shadow:
		inset 0 0 0 1px rgba(24, 31, 73, 0.2),
		0 2px 8px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
	color: var(--anad-color-text);
	cursor: pointer;
	font-family: var(--anad-font-body);
	font-size: 0.9375rem; /* 15px */
	font-weight: 500;
	height: 40px;
	line-height: 38px;
	margin-right: 0.3125rem; /* 5px */
	min-width: max-content;
	padding-right: 2.5rem;
	transition:
		border-color var(--anad-transition-fast),
		box-shadow var(--anad-transition-fast);
	width: auto;
}

#content-controls .field-icon + .field {
	padding-left: 2.75rem;
}

#content-controls select:focus,
#content-controls select:hover {
	background-color: rgba(24, 31, 73, 0.02);
	box-shadow:
		inset 0 0 0 1px var(--anad-color-primary),
		0 0 0 3px rgba(24, 31, 73, 0.12);
	outline: none;
}

#content-controls #content-type option.level-1::before {
	content: "↳ ";
}


/*--------------------------------------------------
---- Campo ricerca ---------------------------------
--------------------------------------------------*/

#content-controls input[type="search"] {
	appearance: none;
	background-color: #ffffff;
	border: 0;
	border-radius: 9999px;
	box-shadow:
		inset 0 0 0 1px rgba(24, 31, 73, 0.2),
		0 2px 8px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
	color: var(--anad-color-text);
	font-family: var(--anad-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	height: 40px;
	line-height: 38px;
	margin-right: 0.3125rem;
	padding: 0 1rem;
	transition:
		background-color var(--anad-transition-fast),
		box-shadow var(--anad-transition-fast);
	vertical-align: middle;
	width: clamp(13rem, 22vw, 15rem);
}

#content-controls input[type="search"]::placeholder {
	color: rgba(24, 31, 73, 0.45);
	font-family: var(--anad-font-editorial);
	font-style: italic;
	font-weight: 400;
	opacity: 1;
}

#content-controls input[type="search"]:hover,
#content-controls input[type="search"]:focus {
	background-color: rgba(24, 31, 73, 0.02);
	box-shadow:
		inset 0 0 0 1px var(--anad-color-primary),
		0 0 0 3px rgba(24, 31, 73, 0.12);
	outline: none;
}

#content-controls input[type="search"]::-webkit-search-cancel-button {
	cursor: pointer;
}


/*--------------------------------------------------
---- Pulsanti tondi --------------------------------
--------------------------------------------------*/

#content-controls .to-edit-collection,
#content-controls .to-edit-search,
#content-controls .to-exit-search,
#content-controls .to-print,
#content-controls .to-reset-search,
#content-controls .to-tools {
	background-color: #ffffff;
	border: 0;
	border-radius: 9999px;
	box-shadow: inset 0 0 0 1px rgba(24, 31, 73, 0.2);
	box-sizing: border-box;
	color: var(--anad-color-primary);
	cursor: pointer;
	font-size: 0;
	height: 40px;
	line-height: 1;
	margin: 0;
	padding: 0;
	position: relative;
	text-decoration: none;
	transition:
		background-color var(--anad-transition-fast),
		box-shadow var(--anad-transition-fast),
		color var(--anad-transition-fast);
	width: 40px;
}

#content-controls .to-edit-collection + .to-print,
#content-controls .to-edit-search + .to-print,
#content-controls .to-exit-search + .to-tools,
#content-controls .to-print + .to-tools,
#content-controls .to-reset-search + .to-exit-search,
#content-controls .to-reset-search + .to-tools {
	margin-left: 0.3125rem; /* 5px */
}

#content-controls .to-edit-collection::before,
#content-controls .to-edit-search::before,
#content-controls .to-exit-search::before,
#content-controls .to-print::before,
#content-controls .to-reset-search::before,
#content-controls .to-tools::before {
	color: inherit;
	display: block;
	font-family: dashicons;
	font-size: 1.25rem; /* 20px */
	left: 50%;
	line-height: 1;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

#content-controls .to-edit-collection::before,
#content-controls .to-edit-search::before {
	content: "\f464";
}

#content-controls .to-exit-search::before {
	content: "\f14a";
}

#content-controls .to-print::before {
	content: "\f193";
}

#content-controls .to-reset-search::before {
	content: "\f531";
	transform: translate(-50%, -50%) rotate(0deg);
	transition: transform 0.35s ease;
}

#content-controls .to-reset-search:focus-visible::before,
#content-controls .to-reset-search:hover::before {
	transform: translate(-50%, -50%) rotate(-360deg);
}

#content-controls .to-tools::before {
	content: "\f333";
}

#content-controls .to-edit-collection:focus-visible,
#content-controls .to-edit-collection:hover,
#content-controls .to-edit-search:focus-visible,
#content-controls .to-edit-search:hover,
#content-controls .to-exit-search:focus-visible,
#content-controls .to-exit-search:hover,
#content-controls .to-print:focus-visible,
#content-controls .to-print:hover,
#content-controls .to-reset-search:focus-visible,
#content-controls .to-reset-search:hover,
#content-controls .to-tools:focus-visible,
#content-controls .to-tools:hover {
	background-color: var(--anad-color-primary);
	box-shadow: none;
	color: #ffffff;
}

#content-controls .to-edit-collection:active,
#content-controls .to-edit-search:active,
#content-controls .to-exit-search:active,
#content-controls .to-print:active,
#content-controls .to-reset-search:active,
#content-controls .to-tools:active {
	background-color: var(--anad-color-secondary);
	box-shadow: none;
	color: #ffffff;
	transition: none;
}


/*--------------------------------------------------
---- Filtro clip -----------------------------------
--------------------------------------------------*/

.single-doppiatori #clips {
	position: relative;
}

.single-doppiatori #clips > h3 {
	padding-right: 14rem;
}

.single-doppiatori #clips-controls {
	display: inline-block;
	inline-size: fit-content;
	margin: 0;
	max-width: max-content;
	position: absolute;
	right: 0;
	top: 0.5rem;
	width: fit-content;
}

.single-doppiatori #clips-controls fieldset {
	border: 0;
	display: inline-block;
	margin: 0;
	min-inline-size: 0;
	padding: 0;
	width: max-content;
}

.single-doppiatori #clips-controls legend {
	display: none;
}

.single-doppiatori #clips-controls label[for="clips-filter"] {
	display: inline-block;
	font-size: 0;
	height: 40px;
	margin-right: -45px;
	position: relative;
	vertical-align: middle;
	width: 40px;
	z-index: 1;
}

.single-doppiatori #clips-controls label[for="clips-filter"]::before {
	align-items: center;
	color: var(--anad-color-primary);
	content: "\f235";
	display: flex;
	font-family: dashicons;
	font-size: 1rem;
	height: 40px;
	justify-content: center;
	left: 0;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 40px;
}

.single-doppiatori #clips-controls select {
	appearance: none;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23181f49' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 6.646a.5.5 0 0 1 .708 0L8 10.293l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
	background-position: right 1rem center;
	background-repeat: no-repeat;
	border: 0;
	border-radius: 9999px;
	box-shadow:
		inset 0 0 0 1px rgba(24, 31, 73, 0.2),
		0 2px 8px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
	color: var(--anad-color-text);
	cursor: pointer;
	display: inline-block;
	font-family: var(--anad-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	height: 40px;
	line-height: 38px;
	margin: 0;
	min-width: max-content;
	padding-left: 2.75rem;
	padding-right: 2.5rem;
	transition:
		background-color var(--anad-transition-fast),
		box-shadow var(--anad-transition-fast);
	vertical-align: middle;
	width: auto;
}

.single-doppiatori #clips-controls select:hover,
.single-doppiatori #clips-controls select:focus {
	background-color: rgba(24, 31, 73, 0.02);
	box-shadow:
		inset 0 0 0 1px var(--anad-color-primary),
		0 0 0 3px rgba(24, 31, 73, 0.12);
	outline: none;
}


/*--------------------------------------------------
---- Form: responsive ------------------------------
--------------------------------------------------*/

@media screen and (max-width: 782px) {

	#wrapper > h2 {
		padding-right: 0;
	}

	#content-controls {
		margin-bottom: 1.5rem; /* 24px */
		position: static;
		width: 100%;
	}

}


@media screen and (max-width: 452px) {

	.single-doppiatori #clips-controls {
		top: 1rem;
	}

}