
div.dte-dropdown {
	position: absolute;
	width: var(--dte-dropdown-width);
	z-index: var(--dte-dropdown-zindex);
	margin-top: 3px;
	border-radius: var(--dte-dropdown-border-radius);

	border: var(--dte-dropdown-border);
	background-color: var(--dte-dropdown-background);
	box-shadow: var(--dte-dropdown-shadow);

	div.dte-dropdown-header {
		padding: 0.5em;

		input {
			width: 100%;
			box-sizing: border-box;
			padding: var(--dte-dropdown-input-padding);
			border: var(--dte-dropdown-input-border);
			border-radius: var(--dte-dropdown-input-border-radius);
		}

		&:empty {
			padding: 0;
		}
	}

	input.dte-dropdown-search {
		display: none;
	}

	div.dte-dropdown-processing {
		right: 12px;
		font-size: 8px;

		&.processing {
			display: block;
		}
	}

	div.dte-dropdown-list {
		font-size: var(--dte-dropdown-font-size);
		overflow: auto;
		max-height: var(--dte-dropdown-max-height);

		thead,
		tfoot {
			display: none;
		}

		div.dt-container > div {
			margin: 0;
		}

		table {
			border-bottom: none !important;

			td {
				padding: 0.5em 1em;

				&.dt-empty {
					text-align: left;
				}
			}
		}

		tr:hover {
			cursor: pointer;
			background-color: var(--dte-dropdown-background-hover);
		}
	}

	div.dte-dropdown-placeholder {
		padding: 0.5em 1em;
		font-size: 0.9em;

		&:empty {
			padding: 0;
		}
	}

	div.dte-dropdown-title {
		padding: 0.5em;
		font-size: 0.9em;

		&:empty {
			padding: 0;
		}
	}
}

div.DTE div.DTE_Field_Type_tags {
	div.DTE_Field_Input {
		position: relative;
	}

	div.dte-tags-disabled {
		div.dte-tag,
		button.dte-tag-add {
			cursor: default;
		}
	}

	button.dte-tag-add {
		display: inline-block;
		padding: var(--dte-tag-label-padding);
		border: var(--dte-tag-border);
		background: var(--dte-tag-background);
		border-radius: var(--dte-tag-border-radius);
		cursor: pointer;
		color: var(--dte-tag-color);

		&:hover {
			background: var(--dte-tag-background-hover);
		}
	}

	div.dte-tag {
		display: inline-flex;
		max-width: 100%;
		margin-right: var(--dte-tag-margin);
		margin-bottom: var(--dte-tag-margin);
		border: var(--dte-tag-border);
		background: var(--dte-tag-background);
		border-radius: var(--dte-tag-border-radius);
		cursor: pointer;
		font-size: var(--dte-tag-font-size);
		color: var(--dte-tag-color);

		div.dte-tag-label {
			max-width: calc(100% - 28px);
			border-right: var(--dte-tag-border);
			padding: var(--dte-tag-label-padding);
			line-height: var(--dte-tag-label-line-height);

			&:hover {
				background: var(--dte-tag-background-hover);
			}
		}

		div.dte-tag-clear {
			display: flex;
			justify-content: center;
			align-items: center;
			align-self: stretch;
			padding: var(--dte-tag-label-padding);
			line-height: var(--dte-tag-label-line-height);

			&:hover {
				background: var(--dte-tag-background-hover);
			}
		}

		div.dte-tag-loading {
			display: inline-block;
			width: 84px;
			height: 10px;
			--_g: no-repeat radial-gradient(farthest-side,#aaa 94%,#aaa0);
			background:
			  var(--_g) 25% 0,
			  var(--_g) 75% 0;
			background-size: 10px 10px;
			position: relative;
			animation: dteTagsLoader-0 1s linear infinite;
			margin-left: -10px;
			margin-right: -10px;

			&:before {
				content: "";
				position: absolute;
				height: 10px;
				aspect-ratio: 1;
				border-radius: 50%;
				background: #999;
				inset: 0;
				margin: auto;
				animation: dteTagsLoader-1 1s cubic-bezier(0.5,300,0.5,-300) infinite;
			}
		}
	}
}


@keyframes dteTagsLoader-0 {
	0%,24%  {background-position: 25% 0,75% 0}
	40%     {background-position: 25% 0,85% 0}
	50%,72% {background-position: 25% 0,75% 0}
	90%     {background-position: 15% 0,75% 0}
	100%    {background-position: 25% 0,75% 0}
}

@keyframes dteTagsLoader-1 {
	100% {transform:translate(0.1px)}
}

html.dark {
	div.DTE div.DTE_Field_Type_tags {
		div.dte-tag {
			div.dte-tag-loading {
				--_g: no-repeat radial-gradient(farthest-side,#555 94%,#5550);

				&:before {
					background: #777;
				}
			}
		}
	}
}
