@use "../../style/mixins";

:host {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	flex: 1;

	.headline-anchors {
		border-bottom: 1px solid var(--card-layout-color-border);
		width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		padding-bottom: 10px;
		color: var(--dialog-text-color);
		white-space: nowrap;

		a {
			display: block;
			padding: 2px 4px;
			font-size: 0.9em;
			cursor: pointer;
			text-align: center;

			&:hover {
				color: var(--main-text-color-lt);
			}
		}

		@include mixins.respond-to(large-down) {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
	}

	.groups {
		overflow: hidden auto;
		width: 100%;
		flex: 1;

		.group {
			width: 100%;

			.group-name {
				border-top: 1px solid var(--card-layout-color-border);
				color: var(--main-content-text-color);
				padding-top: 12px;
				padding-bottom: 12px;
				height: 48px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				cursor: pointer;

				&:hover {
					background-color: var(--card-layout-color-bg-hover);
				}

				.group-expander {
					margin-left: 20px;
					min-width: 20px;

					&::after {
						content: '+';
						color: var(--main-content-text-color-muted);
						font-size: 1.2em;
					}

					&.expanded {
						&::after {
							content: "-";
						}
					}
				}

				.group-count {
					font-size: 0.8em;
					color: var(--main-content-text-color-muted);
					margin-right: 20px;
				}
			}

			&:first-of-type {
				.group-name {
					border-top: inherit;
				}
			}

			.preview-random {
				padding: 20px 10px 10px;

				.random-options {
					display: flex;
					flex-direction: row;
					align-items: center;

					label {
						flex: 1;
						margin-right: 20px;
						align-items: center;
						flex-direction: row;
						display: flex;
					}

					svg {
						margin-right: 8px;

						path {
							fill: var(--main-content-text-color);
						}
					}
				}

				button {
					display: block;
					margin-top: 20px;
					margin-left: auto;
					margin-right: auto;
				}
			}

			.previews {
				width: 100%;
				display: flex;
				flex-flow: row wrap;
				justify-content: space-evenly;
				gap: 4px;
				padding-bottom: 12px;
			}

			.preview {
				margin-top: 8px;
				width: 300px;
				height: 200px;
				cursor: pointer;
				border: 1px solid var(--card-layout-color-border);
				background-color: var(--card-layout-color-bg);
				display: block;
				position: relative;
				overflow: clip;

				app-layout-preview {
					display: block;
					width: 300px;
					height: 200px;
					text-align: center;
					padding-bottom: 1.5em;
				}

				.preview-custom, .preview-best-time {
					position: absolute;
					right: 0;
					background-color: var(--preview-overlay-background);
					color: var(--preview-overlay-text);
					text-shadow: 1px 1px var(--preview-overlay-text-shadow);
					border-bottom-left-radius: 3px;
					padding: 3px 3px 3px 6px;

					a {
						display: inline-block;
						min-width: 1.2em;
						text-align: right;
						transition: all 100ms;
						margin-top: -1px;

						i {
							font-size: 0.8em;
						}

						&:hover {
							transform: scale(1.3);
						}
					}
				}

				.preview-name {
					position: absolute;
					width: 100%;
					height: 1.5em;
					display: block;
					bottom: 0;
					background-color: var(--card-text-color-bg);
					color: var(--card-text-color);
					text-align: center;
					font-size: 0.8em;
					padding: 2px;
				}

				.preview-best-time {
					top: 0;
					display: flex;
					flex-direction: row;
					justify-content: center;
				}

				.preview-custom {
					bottom: 0;
					padding: 2px;
				}

				&.selected, &:hover, &:focus {
					background-color: var(--card-layout-color-bg-hover);

					.preview-name {
						background-color: var(--card-text-color-bg-hover);
					}

					.preview-custom {
						display: block;
					}
				}

				&.selected {
					border: 1px solid var(--card-layout-color-border-selected);
					box-shadow: rgb(0 0 0 / 16%) 0 3px 6px, rgb(0 0 0 / 23%) 0 3px 6px;
				}

				@include mixins.respond-to(jumbo-down) {
					&, app-layout-preview {
						width: 200px;
						height: 190px;
					}
				}

				@include mixins.respond-to(medium-down) {
					width: 49%;

					app-layout-preview {
						width: 100%;
					}
				}

				@include mixins.respond-to(tiny-down) {
					width: 96%;
				}

				@include mixins.respond-to-height(small-down) {
					height: 120px;

					app-layout-preview {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}

