// Classes to show / hide based on the display mode
div.dt-container {
	&.dt-cardview {
		.dtcv-cards-only {
			// noop - Display block / flex / whatever
		}

		.dtcv-table-only {
			display: none;
		}
	}

	&:not(.dt-cardview) {
		.dtcv-cards-only {
			display: none;
		}

		.dtcv-table-only {
			// noop - Display block / flex / whatever
		}
	}
}

div.dtcv-container {
	display: grid;
	gap: var(--dtcv-grid_gap);
	grid-template-columns: repeat(var(--dtcv-grid_columns, 1), 1fr);

	div.dtcv-card {
		position: relative;

		ul {
			margin: 0;
			padding-left: 1em;

			span.dtcv-card_title {
				display: inline-block;
				margin-right: 1em;
				min-width: 75px;

				&:after {
					display: inline-block;
					content: ':'
				}
			}
		}

		dl {
			margin: 0;

			dt {
				font-size: 0.8em;
				opacity: 0.8;
			}

			dd {
				margin: 0 0 0.5em 0;
			}

			div:last-child dl {
				margin-bottom: 0;
			}
		}

		table {
			width: 100%;

			td:first-child {
				min-width: 33%;
			}
		}

		div.dtcv-card_selector {
			display: none;
		}
	}
	
	&.dtcv-container_selectable {
		div.dtcv-card {
			div.dtcv-card_selector {
				position: absolute;
				top: 1em;
				right: 1em;
				width: var(--dtcv-selector_size);
				height: var(--dtcv-selector_size);
				border: var(--dtcv-selector_border);
				border-radius: var(--dtcv-selector_border-radius);
				text-align: center;
				background: var(--dtcv-selector_background);
				cursor: pointer;
				opacity: var(--dtcv-selector_opacity);
				z-index: 1;

				display: flex;
				align-items: center;
				justify-content: center;

				svg {
					color: var(--dtcv-selector_color);
				}
			}

			&:hover {
				div.dtcv-card_selector {
					opacity: var(--dtcv-selector_opacity-card-hover);

					&:hover {
						opacity: var(--dtcv-selector_opacity-hover);
					}
				}
			}

			&.dtcv-card_selected {
				div.dtcv-card_selector {
					opacity: 1 !important;
					background: var(--dtcv-selector_background-selected);
					border: var(--dtcv-selector_border-selected);

					svg {
						color: var(--dtcv-selector_color-selected);
					}
				}
			}
		}
	}
}