:root {
	--sundial-height: 600px;
	--sundial-toolbar-height: 80px;
	--sundial-timeline-height: 8px;
	--sundial-knop-size: calc(22px + var(--sundial-timeline-height));
	--sundial-timeline: #b5b5b5;
	--sundial-timeline-sun: #f3d332;
	--sundial-primary: #ff9f2e;
	--sundial-dark: rgb(0, 0, 0, 0.8);
}

.sundial {
	position: relative;
	width: 100%;
	height: var(--sundial-height);
	isolation: isolate;

	* {
		box-sizing: border-box;
	}
	body {
		margin: 0;
		padding: 30px;
	}

	html,
	body {
		width: 100%;
		height: 100%;
	}

	.sundial__init,
	.sundial__webgl {
		background-image: url('/shared/lib/sundial/images/placeholder.jpg');
	}

	.sundial__init {
		display: none;
		justify-content: center;
		align-items: center;
		height: 100%;
		background-size: cover;
		background-position: center;

		button {
			cursor: pointer;
		}
	}
	.sundial__webgl {
		display: none;
		justify-content: center;
		align-items: center;
		height: 100%;
		background-size: cover;
		background-position: center;
		.sundial__webgl-error {
			font-size: 2rem;
			color: red;
		}
	}

	.sundial__map {
		width: 100%;
		height: 100%;
	}

	.sundial__toolbar {
		z-index: 10;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		min-height: var(--sundial-toolbar-height);
		display: flex;
		align-items: center;
		gap: 15px;
		padding: 15px;
		background-color: var(--sundial-dark);
		&.sundial__toolbar--small {
			flex-direction: column-reverse;
			align-items: stretch;
		}

		.sundial__datepicker {
			input {
				position: relative;
				display: block;
				width: 100%;
				background: transparent;
				color: white;
				padding: 10px;
				border-radius: 0;
				border: 2px solid var(--sundial-primary);
				line-height: unset;
				outline: none;
				transition: all 0.3s;
				&:hover,
				&:focus,
				&:active {
					border-radius: 5px;
					border-color: white;
				}
				&::-webkit-calendar-picker-indicator {
					cursor: pointer;
					color-scheme: dark;
				}
				&::-webkit-clear-button,
				&::-ms-clear {
					display: none !important;
				}
			}
		}
	}

	.sundial__timepicker {
		position: relative;
		width: 100%;
		.sundial__timeline {
			position: relative;
			line-height: 0;
			input[type='range'] {
				-webkit-appearance: none;
				appearance: none;
				width: 100%;
				cursor: pointer;
				outline: none;
				border-radius: 0;
				margin: 0;
				opacity: 0;

				&::-webkit-slider-runnable-track {
					height: var(--sundial-timeline-height);
					border-radius: 0;
				}

				&::-webkit-slider-thumb {
					position: relative;
					-webkit-appearance: none;
					appearance: none;
					height: var(--sundial-knop-size);
					width: var(--sundial-knop-size);
					top: 50%;
					transform: translateY(-50%);
					cursor: grab;
				}
				&:active::-webkit-slider-thumb {
					cursor: grabbing;
				}
				&::-moz-range-track {
					height: var(--sundial-timeline-height);
					border-radius: 0;
				}
				&::-moz-range-thumb {
					position: relative;
					-webkit-appearance: none;
					appearance: none;
					height: var(--sundial-knop-size);
					width: var(--sundial-knop-size);
					top: 50%;
					transform: translateY(-50%);
					cursor: grab;
				}
				&:active::-moz-range-thumb {
					cursor: grabbing;
				}
			}
			.sundial__timeline-container {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				width: calc(100% - var(--sundial-knop-size));
				margin: auto;
				pointer-events: none;
				height: var(--sundial-timeline-height);
				background: #ccc;
				border-radius: 0;
				.sundial__parts {
					position: absolute;
					left: 0;
					right: 0;
					height: 100%;
					margin: 0 calc((var(--sundial-knop-size) * -1) / 2);
					display: flex;
					.sundial__parts-inner {
						background-color: var(--sundial-timeline);
						flex-grow: 1;
						height: 100%;
						&.sundial__parts-inner--dawn {
						}
						&.sundial__parts-inner--sun {
							position: relative;
							background-color: var(--sundial-timeline-sun);
						}
						&.sundial__parts-inner--dusk {
						}
						.sundial__parts-icon {
							height: var(--sundial-knop-size);
							width: var(--sundial-knop-size);
							position: absolute;
							background-repeat: no-repeat;
							top: 50%;
							transform: translateY(-50%);
							box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.25);
							background-size: 105% 105%;
							background-position: center;
							background-color: var(--sundial-timeline-sun);
							border-radius: 100%;
							&.sundial__parts-icon--sun {
								left: calc((var(--sundial-knop-size) * -1) / 2);
								background-image: url(/shared/lib/sundial/images/sun.svg);
							}
							&.sundial__parts-icon--moon {
								right: calc((var(--sundial-knop-size) * -1) / 2);
								background-image: url(/shared/lib/sundial/images/moon.svg);
							}
						}
					}
				}
				.sundial__knop {
					top: 50%;
					height: var(--sundial-knop-size);
					width: var(--sundial-knop-size);
					background-color: #fff;
					border-radius: 50%;
					border: 3px solid var(--sundial-primary);
					position: absolute;
					opacity: 1;
					transform: translate(-50%, -50%);
					box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.25);
					transition: background-color 0.3s;
					&.active {
						background-color: #e7e7e7;
					}

					.sundial__time-stamp {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: calc(100% + 7px);
						background: #ffffff;
						padding: 5px;
						border-radius: 5px;

						.sundial__time-stamp-label {
							font-weight: bold;
							font-size: 16px;
							line-height: 1.25;
							white-space: nowrap;
						}
						.sundial__time-stamp-arrow {
							position: absolute;
							left: 0;
							right: 0;
							margin: auto;
							top: 100%;
							width: 0;
							height: 0;
							border-width: 5px;
							border-style: solid;
							border-color: #ffffff transparent transparent transparent;
						}
					}
				}
			}
		}
	}

	.marker {
		background-image: url('/shared/lib/sundial/images/marker.svg');
		background-size: contain;
		background-repeat:no-repeat;
		width: 50px;
		height: 100px;
		pointer-events: none;
	}

	.sundial__hour-markers {
		display: flex;
		justify-content: space-between;
		flex-direction: row;

		.sundial__hour-marker {
			width: 1px;
			height: calc((var(--sundial-timeline-height) / 2) + 26px);
			border-left: 1px solid var(--sundial-timeline);
			flex: 1;
			position: relative;
			&:last-of-type {
				border-right: 1px solid var(--sundial-timeline);
			}
			.sundial__hour-marker-text {
				position: absolute;
				display: block;
				color: #ffffff;
				font-size: 16px;
				line-height: 0.75;
				font-weight: normal;
				text-align: center;
				width: 100%;
				top: 50%;
				transform: translateY(-75%);
			}
		}
		&.sundial__hour-markers--extra-small {
			.sundial__hour-marker {
				&:nth-child(1),
				&:nth-child(2),
				&:nth-child(3),
				&:nth-child(4),
				&:nth-child(5),
				&:nth-child(8),
				&:nth-child(9),
				&:nth-child(10),
				&:nth-child(11),
				&:nth-child(14),
				&:nth-child(15),
				&:nth-child(16),
				&:nth-child(17),
				&:nth-child(20),
				&:nth-child(21),
				&:nth-child(22),
				&:nth-child(23),
				&:nth-child(24) {
					display: none;
				}
			}
			.sundial__hour-marker-text {
				display: none;
			}
		}

		&.sundial__hour-markers--small {
			.sundial__hour-marker {
				&:nth-child(1),
				&:nth-child(2),
				&:nth-child(3),
				&:nth-child(4),
				&:nth-child(8),
				&:nth-child(9),
				&:nth-child(10),
				&:nth-child(11),
				&:nth-child(14),
				&:nth-child(15),
				&:nth-child(16),
				&:nth-child(17),
				&:nth-child(20),
				&:nth-child(21),
				&:nth-child(22),
				&:nth-child(23) {
					display: none;
				}
			}
		}
		&.sundial__hour-markers--medium {
			.sundial__hour-marker {
				&:nth-child(1),
				&:nth-child(2),
				&:nth-child(3),
				&:nth-child(8),
				&:nth-child(9),
				&:nth-child(10),
				&:nth-child(14),
				&:nth-child(15),
				&:nth-child(16),
				&:nth-child(20),
				&:nth-child(21),
				&:nth-child(22) {
					display: none;
				}
			}
		}
		&.sundial__hour-markers--large {
			.sundial__hour-marker {
				&:nth-child(1),
				&:nth-child(2),
				&:nth-child(8),
				&:nth-child(9),
				&:nth-child(14),
				&:nth-child(15),
				&:nth-child(20),
				&:nth-child(21) {
					display: none;
				}
			}
		}
		&.sundial__hour-markers--extra-large {
			.sundial__hour-marker {
				&:nth-child(1),
				&:nth-child(8),
				&:nth-child(14),
				&:nth-child(20) {
					display: none;
				}
			}
		}
	}
}