:root {
	/* Used */
	--auriga-blue-lighter: #f4faff;
	--auriga-green-light: #88d379;
	--auriga-green-dark: #4caf50;

	--auriga-lighter-yellow: #f9f871;
	--auriga-light-grey: #a1af9f;
	--auriga-lighter-grey: #f1f1e6;

	--auriga-blue-dark: #0d1b2a;
	--auriga-blue-dark-1: #0e1d2d;
	--auriga-blue-dark-2: #0f1f31;
	--auriga-blue-dark-3: #102234;
	--auriga-blue-dark-4: #112438;
	--auriga-blue-dark-5: #12263b;
	--auriga-blue-dark-6: #13283f;
	--auriga-blue-dark-7: #152b42;
	--auriga-blue-dark-8: #162d46;
	--auriga-blue-dark-9: #172f49;
	--auriga-blue-dark-10: #18314d;
	--auriga-blue-dark-11: #193450;
	--auriga-blue-dark-12: #1a3654;
	--auriga-blue-dark-13: #1b3857;
	--auriga-blue-dark-14: #1c3a5b;
	--auriga-blue-dark-15: #1d3c5e;
	--auriga-blue-dark-16: #1e3f62;
	--auriga-blue-dark-17: #1f4165;
	--auriga-blue-dark-18: #204369;
	--auriga-blue-dark-19: #21456c;
	--auriga-blue-dark-20: #23486f;
	--auriga-blue-dark-30: #2d5e92;

	--dark-color: var(--auriga-blue-dark, #222222);
	--dark-color-highlight-less: var(--auriga-blue-dark-3);
	--dark-color-highlight: var(--auriga-blue-dark-10, #303030);
	--dark-color-highlight-more: var(--auriga-blue-dark-20, #555555);
	--light-color: var(--auriga-blue-lighter, #ffffff);
	--color-dim: var(--auriga-lighter-grey, #aeaeae);
	--color-dimmer: var(--auriga-light-grey, #888888);

	--darkmode-bg-color: var(--dark-color);
	--darkmode-text-color:	var(--light-color);
	--darkmode-color-dim: var(--color-dim);
	--darkmode-color-dimmer: var(--color-dimmer);
	--darkmode-color-highlight-less: var(--dark-color-highlight-less);
	--darkmode-color-highlight: var(--dark-color-highlight);
	--darkmode-color-highlight-more: var(--dark-color-highlight-more);

	/* Track selector */
	--darkmode-track-selected-bg: var(--auriga-blue-dark-8);
	--content-bg: linear-gradient(to bottom,
								  var(--auriga-blue-dark-3) 0%,
								  var(--darkmode-bg-color) 100%);

	/* Calculated values */
	--calculated-header-height: 0px;
	--calculated-options-bar-height: 0px;
	--calculated-info-bar-height: 0px;
	--calculated-controls-height: 0px;

	--default-font: Montserrat, sans-serif;
	--font-size-nav-back: 1.25rem;

	/*
	 * Material settings
	 */
	--material-font-family: var(--default-font);
	--text-color-dark: black;
	--dimmer-color: rgb(50 50 50 / 50%);
	--material-card-border: rgb(255 255 255 / 20%);
	--material-menu-shadow: var(--dimmer-color);
	--avatar-size: 36px;
}

html {
	margin: 0;
	padding: 0;

	padding-top: calc(var(--calculated-header-height)
					  + var(--calculated-options-bar-height)
					  + var(--calculated-info-bar-height));
	padding-bottom: calc(var(--calculated-controls-height));

}
/*
 * General settings
 */
html,
body,
div {
	scrollbar-width: thin;
	scrollbar-color: var(--auriga-blue-dark-15) transparent;
	overscroll-behavior-y: contain;
}
body {
	touch-action: none;
	font-family: var(--default-font);
	margin: 0;
	padding: 0;
	background-color: var(--darkmode-bg-color);
	color: var(--darkmode-text-color);
	font-size: 14px;
}
html.menu_open body {
	overflow: hidden;
}

#version {
	position: fixed;
	bottom: 0px;
	right: 4px;
	font-size: 11px;
	color: var(--darkmode-color-dimmer);
	pointer-events: none;
}

#message {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 350px;
	background-color: white;
	color: black;
	overflow: auto scroll;
}

.screen {
	display: none;
}
.screen.show {
	display: block;
}

html #top_header.part,
html #options_bar.part,
html #controls.part {
	display: none;
}

html[data-screen="crash"] {
	.screen.crash,
	#top_header.part {
		display: block;
	}
}

html[data-screen="login"] {
	.screen.login,
	#top_header.part {
		display: block;
	}
}

html[data-screen="player"] {
	.screen.player,
	#top_header.part,
	#options_bar.part,
	#controls.part {
		display: block;
	}
}

html[data-screen="playlist"] {
	.screen.playlist {
		display: block;
	}
}

html[data-screen="playlist_edit"] {
	.screen.playlist_edit {
		display: block;
	}
}

html[data-screen="search"] {
	.screen.search,
	#controls.part {
		display: block;
	}
}

.login_container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	justify-items: center;
	align-content: center;
	align-items: center;
}

/*
 * material: menu overload
 */
.material_menu .material_menu_nav button.material_menu_button {
	width: unset;
}
.material_menu .material_menu_nav button.material_menu_button:active:not(disabled=yes) {
	background-color: var(--track-selected-bg);
	filter: brightness(120%);
	border-radius: 0;
}

.material_menu.open button.material_menu_ellipsis {
	background: var(--auriga-blue-dark-5);
}
button.material_menu_ellipsis {
	padding: 0;
}
.material_menu nav.material_menu_nav {
	background: var(--auriga-blue-dark-8);
	min-width: 200px;
}
.material_menu_button > div {
	font-size: 13px;
}
button.material_menu_button i {
	font-size: 24px;
}
button.material_menu_ellipsis i {
}


/*
 * Header with logo
 */
header {
	position: fixed;
	top: 0;
	padding: 4px 4px 0 4px;
	height: 50px;
	width: 100%;
	z-index: 10;
	/* background: linear-gradient(to top, transparent 0px, var(--darkmode-bg-color) 8px); */
	background-color: var(--darkmode-bg-color);
}
header img.logo {
	max-width: 250px;
	max-height: 42px;
}

/*
 * Menu
 */
menu {
	position: fixed;
	top: 8px;
	right: 8px;
	margin: 0;
	padding: 0;
	z-index: 20;
}
menu button {
	cursor: pointer;
    font-size: 20px;
    line-height: 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: transparent;
    color: var(--light-color);
    border: 0;
}
menu button.material_menu_ellipsis:hover,
menu button:active {
	background-color: var(--track-selected-bg);
	filter: brightness(120%);
}
#logout_button {
}

/*
 * Options bar
 */
#options_bar {
	position: fixed;
	top: var(--calculated-header-height);
	width: 100%;
	user-select: none;
	.group {
		display: flex;
		gap: 8px;
		align-items: center;
	}
}
#options_bar > div {
	width: 100%;
	z-index: 10;
	display: flex;
	flex-direction: row;
	gap: 24px;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding: 4px 8px 8px 8px;
	background-color: var(--darkmode-bg-color);
}

#options_bar .material-symbols {
	font-size: 24px;
	line-height: 24px;
}
#options_bar button {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background-color: var(--darkmode-color-highlight-more);
	color: var(--light-color);
	border-radius: 8px;
	padding: 4px 8px;
	border: 0;
}
#options_bar button:active {
	filter: brightness(120%);
}

/*
 * Info bar
 */
#info_bar {
	position: fixed;
	top: calc(var(--calculated-header-height)
			  + var(--calculated-options-bar-height));
	width: 100%;
	box-sizing: border-box;
	z-index: 10;
	padding: 4px 8px 8px 8px;
	background: linear-gradient(to top, transparent 0px, var(--darkmode-bg-color) 8px);

	> div {
		display: none;
	}
	.header {
		font-weight: bold;
	}

	.type_playlist,
	.type_album {
		flex-direction: row;
		gap: 8px;
		font-size: 14px;
		.playlist,
		.artist,
		.album {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

#info_bar[data-show="album"] {
	.type_album {
		display: flex;
		overflow: hidden;
	}
}

#info_bar[data-show="playlist"] {
	.type_playlist {
		display: flex;
		overflow: hidden;
	}
}

/*
 * Remove style for range
 */
input.clear[type=range] {
	-webkit-appearance: none;
	width: 100%;
	background: transparent;
}
input.clear[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
}
input.clear[type=range]:focus {
	outline: none;
}
input.clear[type=range]::-ms-track {
	width: 100%;
	cursor: pointer;

	background: transparent;
	border-color: transparent;
	color: transparent;
}


/*
 * Track list
 */
.track_list {
	--track-selected-bg: var(--darkmode-track-selected-bg);
	--track-list-font-size: 11px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	scroll-behavior: smooth;
	font-size: var(--track-list-font-size);
	user-select: none;
	overflow: auto;
	overflow-x: hidden;
}
/*
 * Track
 */
.track_list .track {
	display: flex;
	cursor: pointer;
	padding: 0 8px;
	align-items: center;
	justify-content: space-between;
	/* -webkit-tap-highlight-color: transparent; */
}
/* .track_list .track:active { */
/* 	background-color: var(--track-selected-bg); */
/* 	filter: brightness(120%); */
/* } */
.track_list .track > div:empty {
	display: none;
}

.track_list .track .track_art {
	--image-size: 40px;
	flex: 0 0 var(--image-size);
}
.track_list .track_art .album_art {
	width: var(--image-size);
	height: var(--image-size);
	overflow: hidden;
	padding: 2px 0;
}
.track_list .track.selected .track_art .album_art {
	background-color: var(--track-selected-bg);
}
.track_list .track .album_art > img {
	height: 100%;
	background-color: black;
}
.track_list .track .track_text > div:empty {
	display: none;
}
.track_list .track .track_text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 0;
	overflow: hidden;
	white-space: nowrap;
	height: 100%;
	padding: 0 8px;
}
.track_list .track_text > div {
	overflow: hidden;
	text-overflow: ellipsis;
}
.track_list .track_text .artist {
	font-weight: 600;
}
.track_list .track_text .album {
	display: none;
	font-style: italic;
}
.track_list .track_text .title {
}
.track_list .track.selected {
	background-color: var(--track-selected-bg);
}
.track_list .track_actions {
	text-align: right;
	flex: 0 0 0;
}
.track_list .track_actions button {
	cursor: pointer;
	font-size: 20px;
	width: 42px;
	height: 42px;

	border-radius: 50%;
	background-color: transparent;
	color: var(--light-color);
	border: 0;
}
.track_list .track_actions button:active:not([disabled]) {
	background-color: var(--track-selected-bg);
	filter: brightness(120%);
}

/*
 * Controls
 */
#controls {
	--bg-color: var(--darkmode-bg-color);
	--shadow-height: 4px;
	--padding: 8px;
	position: fixed;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-top: calc(var(--shadow-height) + var(--padding));
	padding-bottom: var(--padding);
	background: linear-gradient(to bottom, transparent 0px,
								var(--bg-color) var(--shadow-height),
								var(--bg-color) var(--padding));
}
#controls .buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
}
#controls button {
	cursor: pointer;
	font-size: 34px;
	height: 46px;
	width: 46px;
	line-height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;

	background-color: transparent;
	color: white;
	border-radius: 50%;
	border: 0;

}
#controls button:active {
	background-color: var(--darkmode-track-selected-bg);
	filter: brightness(120%);
}
#controls #play_button,
#controls #pause_button {
	height: 52px;
	width: 52px;

	font-size: 34px;
	background-color: #f0f0f0;
	color: black;
}
#controls #play_button:active,
#controls #pause_button:active {
	background-color: white;
	filter: brightness(150%);
}

/*
 * Play status
 */
#play_status {
	--value: 0;
	display: flex;
	flex-direction: column;
	margin: 0 auto;

	width: 100%;
	padding: 0 8px;
	box-sizing: border-box;
	position: relative;
}
#play_status:before {
	content: '';
	position: absolute;

	z-index: 10;
	display: block;
	--remove: (30px * var(--value));
	width: calc(1.45px + (100% * var(--value)) - var(--remove));
	height: 3px;
	top: 9px;
	box-sizing: border-box;
	background-color: var(--auriga-blue-dark-30);
}
#timeline {
	--thumb-size: 15px;
	width: 100%;
}
#timeline::-webkit-slider-runnable-track {
	position: relative;
	background-color: var(--darkmode-color-dim);
	height: 1px;
	margin: calc(var(--thumb-size) / 2) 0;
}
#timeline:focus::-webkit-slider-runnable-track {
}
#timeline::-moz-range-track {
	position: relative;
	background-color: var(--darkmode-color-dim);
	height: 1px;
	margin: calc(var(--thumb-size) / 2) 0;
}

#timeline::-webkit-slider-thumb {
	position: relative;
	top: -7px;
	border-radius: 50%;
	background-color: white;
	width: var(--thumb-size);
	height: var(--thumb-size);
	z-index: 20;
}
#timeline::-moz-range-thumb {
	position: relative;
	top: -7px;
	border-radius: 50%;
	border: 0;
	background-color: white;
	width: var(--thumb-size);
	height: var(--thumb-size);
	z-index: 20;
}
#playingtime {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--darkmode-color-dim);
}

/*
 * Playlist, temporary
 */
#playlist_div {
	user-select: none;
	background: var(--content-bg);
    position: fixed;
    width: 100%;
    box-sizing: border-box;
	height: calc(100%
				 - var(--calculated-header-height)
				 - var(--calculated-options-bar-height)
				 - var(--calculated-info-bar-height)
				 - var(--calculated-controls-height));
}

/*
 * Screen: playlist
 */
.screen.playlist {
	--list-font-size: 12px;
	> nav.back {
		display: flex;
		gap: 24px;
		align-items: center;
		padding: 8px;
		box-sizing: border-box;
		font-size: var(--font-size-nav-back);
	}

	.ui_list {
		.ui_item {
			.content {
				white-space: nowrap;
				overflow: hidden;
				> div:empty {
					display: none;
				}
				.playlist_name {
					font-weight: 600;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.metadata {
				}
			}
		}
	}
}

/*
 * Screen: playlist_edit
 */
.screen.playlist_edit {
	--list-font-size: 12px;
	height: 100%;
	> nav.back {
		display: flex;
		gap: 24px;
		align-items: center;
		padding: 8px;
		box-sizing: border-box;
		font-size: var(--font-size-nav-back);
	}

	.playlist_info {
		margin: 0 8px;
		padding-bottom: 0.5rem;
		box-sizing: border-box;

		h2 {
			margin: 0;
			margin-bottom: 8px;
			font-size: 1.1rem;
			font-weight: 500;
		}

		.meta {
		}
	}

	.ui_list {
		position: fixed;
		box-sizing: border-box;
		height: calc(100% - var(--nav-back-height) - var(--playlist-info-height) - var(--options-bar-height));
		width: 100%;
		overflow: auto;
		button.button > i {
			margin-right: 0;
		}
		.ui_item {
			width: 100%;
			padding: 0 8px;
			box-sizing: border-box;
			.avatar {
				height: 40px;
				width: 40px;
				overflow: hidden;
				> img {
					height: 100%;
				}
			}
			.content {
				white-space: nowrap;
				overflow: hidden;
				> div:empty {
					display: none;
				}
				.artist {
					font-weight: 600;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.track {
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.metadata {
				}
			}
		}
	}
}


/*
 * Other UI
 */
#shuffle_button {
	position: absolute;
	left: 8px;
	border: 0px none;
	padding: 0;
	margin: 0;
	background-color: transparent;
}
#shuffle_button > img {
	width: 24px;
	vertical-align: top;
}
#shuffle_button.on > span.off  {
	display: none;
}
#shuffle_button.off > span.on  {
	display: none;
}

/*
 * UI elements
 */
.ui_list {
	--list-font-size: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	user-select: none;
	font-size: var(--list-font-size);
	.ui_item {
		background-color: var(--auriga-blue-dark-3);
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		> div:empty {
			display: none;
		},
		.avatar {
			flex: 0 0 0;
		}
		.content {
			cursor: pointer;
			flex: 1 1 0;
			padding: 8px;
		}
		.actions {
			flex: 0 0 0;
			display: flex;
			align-items: center;

			> button.ui {
				border-radius: 8px;
				background-color: var(--darkmode-color-highlight-more);
				width: auto;
				height: 32px;
				white-space: nowrap;
				padding-left: 8px;
				padding-right: 8px;
			}
			> .material_menu > button.material_menu_ellipsis:disabled {
				visibility: hidden;
			}
		}
	}
}


.options_bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 8px;
	padding-top: 0;
	user-select: none;

	.material-symbols {
		font-size: 24px;
		line-height: 24px;
	}
	button {
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		background-color: transparent;
		color: var(--light-color);
		border-radius: 8px;
		padding: 4px 8px;
		border: 0;
	}
	button:active {
		filter: brightness(120%);
		background-color: var(--auriga-blue-dark-5);
	}
}

button.ui {
	color: var(--color-dim);
	background-color: transparent;
	border: 0;
	border-radius: 50%;
	width: 42px;
	height: 42px;
	cursor: pointer;
}
button.ui:hover {
}
button.ui:active {
	background-color: var(--darkmode-track-selected-bg);
	color: var(--light-color);
	filter: brightness(150%);
}
.material_menu {
	.material_menu_nav button {
		cursor: pointer;
		font-size: 20px;
		width: 42px;
		height: 42px;
		xborder-radius: 50%;
		border-radius: 8px;
		background-color: transparent;
		color: var(--light-color);
		border: 0;
	}
	.material_menu_nav button:disabled {
		color: var(--color-dimmer);
	}
	.material_menu_nav button:not([disabled]):hover {
		background-color: var(--darkmode-track-selected-bg);
		filter: brightness(110%);
	}
	.material_menu_nav button:not([disabled]):active {
		background-color: var(--darkmode-track-selected-bg);
		filter: brightness(125%);
	}
}

#modal_container {
	nav.modal_back {
		display: flex;
		gap: 24px;
		align-items: center;
		padding: 8px;
		box-sizing: border-box;
		margin: 0 -16px 0 -16px;
	}

	@media screen and (max-width:767px) {
		nav.modal_back {
			margin: -16px -12px 0 -12px;
		}
	}
}

/*
 * Modal
 */
#modal_container {
	position: fixed;
	background-color: rgba(50, 50, 50, 0.5);
	backdrop-filter: blur(5px);
	width: 100%;
	height: calc(100% - var(--calculated-controls-height) + 4px);
	top: 0;
	left: 0;
	text-align: left;
	z-index: 600;
	font-family: var(--material-font-family);
}
#modal_container input,
#modal_container select,
#modal_container textarea,
#modal_container button,
#modal_container a.modal_close {
}
#modal_container a:hover {
	color: var(--light-color);
}
#modal_container > div.modal {
	position: relative;
	width: 100%;
	max-width: 561px;
	min-height: 140px;
	margin: 0 auto;
	box-sizing: border-box;
	overflow-y: auto;

	background: var(--content-bg);

	padding: 0 24px 24px 24px;
	border-radius: 0 0 20px 20px;
	border-top: 0 none;
}
#modal_container div.modal_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#modal_container div.modal_header.no_flex {
	display: block;
	position: fixed;
	right: 16px;
}
#modal_container a.modal_close {
	margin-top: 8px;
}
#modal_container form {
	margin: 0;
}

@media screen and (max-width:767px) {
	#modal_container {
		overflow-y: auto;
	}
	#modal_container > div.modal {
		border-radius: 0 0 10px 10px;
		border-top: 0 none;
		padding: 16px 12px 12px 12px;
	}
}

/*
 * Modals
 */
#modal_container {
	/* Default is no header */
	div.modal_header,
	div.modal_header.no_flex {
		display: none;
	}
}
#modal_container .track_to_playlist {
	.playlist_selection {
		display: flex;
		flex-direction: column;
		gap: 4px;
		user-select: none;
		.playlist {
			margin-left: -16px;
			margin-right: -16px;
			padding: 0 16px;
			display: flex;
			align-items: center;
			cursor: pointer;
			height: 42px;
		}
		.playlist:active {
			background-color: var(--darkmode-track-selected-bg);
			color: var(--light-color);
			filter: brightness(150%);
		}
	}
	.ui_list {
		.ui_item {
			.content {
				white-space: nowrap;
				overflow: hidden;
				> div:empty {
					display: none;
				}
				.playlist_name {
					font-weight: 600;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.metadata {
				}
			}
		}
	}
	@media screen and (max-width:767px) {
		.playlist_selection {
			.playlist {
				margin-left: -12px;
				margin-right: -12px;
				padding: 0 12px;
			}
		}
	}
}

/*
 * Screen: search
 */
.screen.search {
	--scroll-space-needed: 0px;
	form {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		background-color: var(--darkmode-bg-color);
		z-index: 10;
	}
	form > div {
		display: flex;
		gap: 24px;
		align-items: center;
		padding: 8px;
		box-sizing: border-box;
	}
	form > .selection {
		gap: 16px;
	}
	form > .selection button {
		cursor: pointer;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;

		color: var(--color-dim);
		border-radius: 8px;
		padding: 4px 8px;
		border: 0;

		background-color: var(--darkmode-color-highlight);
	}
	form > .selection button.selected {
		background-color: var(--darkmode-color-highlight-more);
		color: var(--light-color);
	}
	input.search_text {
		font-size: 16px;
		padding: 8px;
		border: 0;
		color: var(--dark-color);
		border-radius: 8px;
		flex-grow: 1;
		outline: none;
	}

	.result {
		position: fixed;
		top: var(--scroll-space-needed);
		width: 100%;
		height: calc(100% - var(--scroll-space-needed) - var(--calculated-controls-height));
		padding-top: 8px;
		box-sizing: border-box;
		overflow: auto;
	}
}

/*
 * Google cast launcher
 */
google-cast-launcher {
	height: 24px;

	--connected-color: var(--light-color);
	--disconnected-color: var(--color-dimmer);

	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background-color: var(--darkmode-color-highlight-more);
	color: var(--light-color);
	border-radius: 8px;
	padding: 4px 8px;
	border: 0;
}
google-cast-launcher:active {
	xbackground-color: var(--darkmode-track-selected-bg);
	xcolor: var(--light-color);
	xfilter: brightness(150%);
	filter: brightness(120%);
}