// Alignment of the content - when empty for left aligned column the content should be on the right
// but for right aligned columns the content should be on the left.
table.dataTable {
	div.dt-column-header {
		span.dt-column-title:empty + span.dtcc {
			flex-grow: 1;
			margin-left: auto;
		}
	}

	.dt-type-numeric,
	.dt-type-date,
	.dt-right {
		div.dt-column-header span.dt-column-title:empty + span.dtcc {
			margin-right: auto;
			margin-left: 0;
		}
	}

	> thead > tr.dtcc-row_no-bottom-border > * {
		border-bottom: none !important;
	}

	> thead > tr.dtcc-row_no-top-padding > * {
		padding-top: 0 !important;
	}
}

table.dataTable span.dtcc {
	position: relative;
	font-weight: normal;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;

	button.dtcc-button {
		display: inline-flex;
		padding: var(--dtcc-button_padding);
		border: var(--dtcc-button_border);
		border-radius: var(--dtcc-button_border-radius);
		background: var(--dtcc-button_background);
		cursor: pointer;
		opacity: var(--dtcc-button_opacity);

		&:hover {
			border: var(--dtcc-button_hover-border);
			background: var(--dtcc-button_hover-background);
			opacity: var(--dtcc-button_hover-opacity);
		}

		&.dtcc-button_disabled {
			cursor: initial;
			opacity: var(--dtcc-button_disabled-opacity);
		}

		> span.dtcc-button-state {
			display: none;
		}

		> span.dtcc-button-extra {
			display: none;
		}
	}

	button.dtcc-button_active {
		opacity: 1;
	}

	input {
		box-sizing: border-box;
		width: 100%;
	}

	span.dtcc-button-icon {
		display: inline-block;
		box-sizing: content-box;
		color: var(--dtcc-button-icon_color);
		vertical-align: middle;
		line-height: var(--dtcc-button-icon_size);
		height: var(--dtcc-button-icon_size);

		svg {
			width: var(--dtcc-button-icon_size);
			height: var(--dtcc-button-icon_size);
			vertical-align: initial;
		}
	}

	span.dtcc-button-text {
		display: none;
	}

	div.dtcc-spacer {
		display: inline-block;
		margin: 0 var(--dtcc-spacer_margin);
		padding-left: 0.5em;
		border-left: var(--dtcc-spacer_border);
		vertical-align: middle;
		white-space: nowrap;
		cursor: initial;

		&:empty {
			width: 1px;
			height: 1em;
			padding-left: 0;
		}
	}

	div.dtcc-search {
		flex-grow: 1;

		div.dtcc-search-title {
			margin-bottom: 0.25em;
			text-align: left;
		}

		&:empty {
			display: none;
		}

		&.dtcc-search_active {
			> div div.dtcc-search-type-icon {
				svg {
					opacity: 1;
				}
			}
		}

		&:not(.dtcc-search_active) {
			span.dtcc-search-clear {
				display: none;
			}
		}

		> div {
			position: relative;

			div.dtcc-search-type-icon {
				display: flex;
				position: absolute;
				top: 0;
				align-items: center;
				justify-content: center;
				width: 30px;
				height: 100%;

				svg {
					width: var(--dtcc-search-icon_size);
					height: var(--dtcc-search-icon_size);
					color: var(--dtcc-search-icon_color);
					opacity: var(--dtcc-search-icon_opacity);
					vertical-align: initial;
				}

				&:hover {
					background-color: var(--dtcc-search-icon_hover-background);
				}
			}

			select {
				position: absolute;
				top: 0;
				width: 30px;
				height: 100%;
				cursor: pointer;
				opacity: 0;
				background-color: var(--dtcc-search-input_background);
			}

			span.dtcc-search-clear {
				display: flex;
				position: absolute;
				top: 0;
				align-items: center;
				justify-content: center;
				width: 14px;
				height: 100%;
				cursor: pointer;
			}

			div.dtcc-search-icon {
				display: none;
			}

			input {
				padding: var(--dtcc-search-input_padding);
				border: var(--dtcc-search-input_border);
				border-radius: var(--dtcc-search-input_border-radius);
				background-color: var(--dtcc-search-input_background);
				color: inherit;
			}
		}
	}

	div.dtcc-searchText > div {
		div.dtcc-search-type-icon {
			right: 0;
			z-index: 1;
		}

		select {
			right: 0;
			z-index: 2;
			padding: 0;
		}

		span.dtcc-search-clear {
			right: 28px;
			z-index: 1;
		}

		input {
			padding-right: 46px;
		}
	}

	div.dtcc-searchNumber > div,
	div.dtcc-searchDateTime > div {
		div.dtcc-search-type-icon {
			left: 0;
			z-index: 1;
		}

		select {
			left: 0;
			z-index: 2;
			padding: 0;
		}

		span.dtcc-search-clear {
			left: 28px;
		}

		input {
			padding-left: 46px;
			text-align: right;
		}
	}
}

div.dtcc-dropdown {
	display: block;
	box-sizing: border-box;
	z-index: var(--dtcc-dropdown_z-index);
	position: absolute;
	// transition: left 0.5s;
	width: var(--dtcc-dropdown_width);
	margin: var(--dtcc-dropdown_margin);
	padding: var(--dtcc-dropdown_padding);
	overflow: hidden;
	border: var(--dtcc-dropdown_border);
	border-radius: var(--dtcc-dropdown_border-radius);
	background: var(--dtcc-dropdown_background);
	box-shadow: var(--dtcc-dropdown_box-shadow);

	button.dtcc-button {
		display: flex;
		position: relative;
		align-items: center;
		width: 100%;
		padding: var(--dtcc-dropdown-button_padding);
		border: var(--dtcc-dropdown-button_border);
		background: var(--dtcc-dropdown-button_background);
		color: var(--dtcc-dropdown-button_color);
		text-align: left;
		cursor: pointer;

		&:focus {
			outline-offset: -2px;
		}

		&:hover {
			background: var(--dtcc-dropdown-button_hover-background);
		}

		&.dtcc-button_disabled {
			cursor: initial;
			opacity: var(--dtcc-button_disabled-opacity);
		}

		&.dtcc-button_empty span.dtcc-button-text {
			opacity: var(--dtcc-button_empty-opacity);
			font-style: italic;
		}

		> span.dtcc-button-state {
			display: block;
			width: var(--dtcc-button-icon_size);
			height: var(--dtcc-button-icon_size);
			margin: 0 0 0 var(--dtcc-button-icon_margin);

			&:empty {
				display: none;
			}

			svg {
				width: var(--dtcc-button-icon_size);
				height: var(--dtcc-button-icon_size);
				vertical-align: initial;
			}
		}

		> span.dtcc-button-extra:empty {
			display: none;
		}

		span.dtcc-button-icon {
			width: var(--dtcc-button-icon_size);
			height: var(--dtcc-button-icon_size);
			margin: 0 var(--dtcc-button-icon_margin) 0 0;

			svg {
				width: var(--dtcc-button-icon_size);
				height: var(--dtcc-button-icon_size);
				vertical-align: var(--dtcc-dropdown-icon_vertical-align);
			}
		}

		span.dtcc-button-text {
			flex-grow: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	div.dtcc-spacer {
		margin: var(--dtcc-spacer_margin) 0;
		padding: 0;
		border-bottom: var(--dtcc-spacer_border);
		border-left: none;
	}

	div.dtcc-title {
		margin: var(--dtcc-title_margin);
		padding: var(--dtcc-title_padding);
		border-top: var(--dtcc-title_border-top);
		border-right: var(--dtcc-title_border-right);
		border-bottom: var(--dtcc-title_border-bottom);
		border-left: var(--dtcc-title_border-left);
		background: var(--dtcc-title_background);
		text-align: var(--dtcc-title_text-align);
	}

	div.dtcc-search {
		padding: var(--dtcc-dropdown-search_padding);

		> div {
			display: flex;
			position: relative;
			flex-wrap: wrap;
			align-items: center;
			border: var(--dtcc-dropdown-button_border);
			background: var(--dtcc-dropdown-button_background);
			color: var(--dtcc-dropdown-button_color);

			// The icons
			div {
				flex: 0 0 var(--dtcc-button-icon_size);
				width: var(--dtcc-button-icon_size);
				height: var(--dtcc-button-icon_size);
				margin: 0 var(--dtcc-button-icon_margin) 0 0;

				svg {
					width: var(--dtcc-search-icon_size);
					height: var(--dtcc-search-icon_size);
					color: var(--dtcc-search-icon_color);
					vertical-align: var(--dtcc-dropdown-icon_vertical-align);
				}
			}

			select,
			input {
				box-sizing: border-box;
				flex: 1 1 calc(100% - var(--dtcc-search-input_flexCalc));
				width: 100%;
				min-width: 0;
				padding: var(--dtcc-search-input_padding);
				border: var(--dtcc-search-input_border);
				border-radius: var(--dtcc-search-input_border-radius);
				background-color: var(--dtcc-search-input_background-color);

				option {
					background-color: var(--dtcc-search-input_background-color);
				}
			}

			// Second row
			input,
			div.dtcc-search-icon {
				margin-top: var(--dtcc-search-input_margin-top);
			}

			input {
				padding-right: var(--dtcc-search-input_padding-right);
			}

			span.dtcc-search-clear {
				position: absolute;
				right: var(--dtcc-search-clear_right);
				bottom: var(--dtcc-search-clear_bottom);
				width: 14px;
				cursor: pointer;
			}
		}

		&:not(.dtcc-search_active) {
			span.dtcc-search-clear {
				display: none;
			}
		}
	}

	div.dtcc-list {
		div.dtcc-list-title,
		div.dtcc-list-empty {
			padding: var(--dtcc-dropdown-button_padding);
			font-style: italic;

			&:empty {
				display: none;
			}
		}

		div.dtcc-list-controls {
			display: grid;
			padding: var(--dtcc-dropdown-button_padding);
			gap: 0.5em;

			&:empty {
				display: none;
			}

			button.dtcc-list-selectAll,
			button.dtcc-list-selectNone {
				width: 100%;
				padding: 0;
				border: none;
				background-color: transparent;
				color: inherit;
				font-size: 80%;
				text-align: center;
				cursor: pointer;

				&:hover {
					text-decoration: underline;
				}

				span {
					display: inline-block;
					padding-left: 0.25em;
				}
			}

			input.dtcc-list-search {
				box-sizing: border-box;
				grid-column: 1 / 3;
				width: 100%;
				padding: var(--dtcc-search-input_padding);
				border: var(--dtcc-search-input_border);
				border-radius: var(--dtcc-search-input_border-radius);
				background-color: var(--dtcc-search-input_background-color);
			}
		}

		div.dtcc-list-buttons {
			max-height: var(--dtcc-list-buttons_max-height);
			overflow: auto;
			background: var(--dtcc-list-buttons_background);
		}

		span.dtcc-button-icon:empty {
			display: none;
		}
	}
}

:root {
	--dtcc-popover_background: white;
	--dtcc-popover_border: transparent;
	--dtcc-popover_box-shadow: 2px 2px 8px rgba(100, 100, 100, 0.5);
	--dtcc-popover_padding: 1em;
	--dtcc-popover_font-size: 0.8em;
	--dtcc-popover_color: inherit;
	--dtcc-popover_border-radius: 4px;

	&.dark {
		--dtcc-popover_background: rgb(27, 27, 27);
		--dtcc-popover_box-shadow: 1px 2px 8px rgba(255, 255, 255, 0.1);
	}
}

div.dtcc-popover {
	position: absolute;
	width: 200px;
	background: var(--dtcc-popover_background);
	border: var(--dtcc-popover_border);
	box-shadow: var(--dtcc-popover_box-shadow);
	padding: var(--dtcc-popover_padding);
	font-size: var(--dtcc-popover_font-size);
	color: var(--dtcc-popover_color);
	border-radius: var(--dtcc-popover_border-radius);
	z-index: 10;
	white-space: wrap;
	line-height: 1.35em;
	text-align: left;

	&::after {
		position: absolute;
		top: 100%;
		right: calc(50% - 5px);
		height: 0;
		width: 0;
		border: 5px solid transparent;
		border-top: 5px solid var(--dtcc-popover_background);
		content: '';
		display: block;
	}

	&.below::after {
		top: -9px;
		border-bottom: 5px solid var(--dtcc-popover_background);
		border-top: 5px solid transparent;
	}
}