// Defined in scss file instead of sass because indented syntax does not have multiline maps
// https://github.com/sass/sass/issues/216

@use "sass:map";

// This section is for colour shades
$theme: (
	// darker
	"bg-0": #252628,
	"bg-1": #303336,
	// regular
	"bg-2": #36393f,
	// lighter
	"bg-3": #3f4247, // slightly
	"bg-4": #44474b, // noticably
	"bg-5": #4f5359, // brightly

	"fg-bright": #fff,
	"fg-main": #ddd,
	"fg-dim": #bbb,
	"fg-dimmer": #888,
	"fg-warning": #fdca6d,

	"edge-grey": #a0a0a0,
	"placeholder": #c4c4c4,

	"link": #8ac2f9,

	"power-deep": #c62727,
	"power-fg": "#fff",

	"image-dropdown": url(/static/images/arrow-down-wide-dark.svg),
	"disabled-image-dropdown": url(/static/images/arrow-down-disabled-wide-dark.svg),

	/////

	"bg-overlay": #20202080,
	"bg-panel": rgba(0.9803921568627451, 0.6666666666666666, 0.6705882352941176, 0.875),
	"bg-hover": #2f323f,
	"bg-input": #292b36,
	"bg-input-disabled": #15161c
);

// This section is for colour meanings
$theme: map.merge($theme, (
	"bg-dim": map.get($theme, "bg-0"),
	"bg-nav": map.get($theme, "bg-5"),
));

// Eir's stuff...

@font-face {
	font-family: Terminess;
	src: url(/static/fonts/TerminessNerdFontMono-Regular.ttf);
}
@font-face {
	font-family: Terminess;
	src: url(/static/fonts/TerminessNerdFontMono-Bold.ttf);
	font-weight: bold;
}
@font-face {
	font-family: Terminess;
	src: url(/static/fonts/TerminessNerdFontMono-Italic.ttf);
	font-style: italic;
}
@font-face {
	font-family: Terminess;
	src: url(/static/fonts/TerminessNerdFontMono-BoldItalic.ttf);
	font-weight: bold;
	font-style: italic;
}

body {
	background-image: url("https://eir-nya.gay/static/images/background/sunset.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 0%;
	background-attachment: fixed !important;
	background-color: transparent !important;

	font-family: Terminess, hack, 'Courier New', courier, monospace !important;
	font-size: 14px !important;
}
body.dark {
	background-image: url("https://eir-nya.gay/static/images/background/night_sky.png");
}

/* Light toggle */
.light-button {
	position: relative;
	margin: 0 !important;
	padding-right: 16px !important;

	.light-toggle {
		z-index: 1;
		position: absolute;
		padding: 0;
		margin: 0;
		bottom: 8px;
		left: 0;
		width: calc(100% - 8px);
		height: calc(100% - 16px);
		appearance: none;
		-webkit-appearance: none;

		cursor: url("/static/images/cursors/pointer.cur"), pointer;

		&:checked ~ .light-off,
		&:not(:checked) ~ .light-on {
			display: none;
		}
	}

	* {
		transform: translateY(1px);
	}

	&.hidden {
		display: none
	}
}

button:not([disabled]),
.main-nav .search-form .search-icon {
	cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
}
button[disabled], select {
	cursor: url("/static/images/cursors/default.cur"), default !important;
}
button:not(.videoControlBtn):not(.captionBtn):not(.redownloadBtn), select, input:not([type="range"]):not(.dearrow-button-list):not(.dearrow-button-video):not(.light-toggle), .continuation-btn {
	background-color: map.get($theme, "bg-input") !important;
}
button[disabled]:not(.redownloadBtn), select[disabled], input[disabled] {
	background-color: map.get($theme, "bg-input-disabled") !important;
}
.checkbox-hider__container, .data-management .delete-confirm-container {
	background-color: map.get($theme, "bg-input") !important;
	border-radius: 0px;
}
.checkbox-hider__label {
	cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
}
.border-look:not([disabled]) {
	background-color: map.get($theme, "bg-input") !important;
}

details:not(.thumbnail__more):not(.fetch-error) {
	background-color: map.get($theme, "bg-input") !important;
	border-radius: 0px !important;
	border: none;
}
details summary {
	cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
}
.toast-container .close-overlay {
	cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
}
.description, .info-secondary {
	cursor: url("/static/images/cursors/text.cur"), text !important;
}

body > div > main:not(.home-page)/*, main.error*/ {
	background-color: map.get($theme, "bg-overlay") !important;
	padding: 40px 20px 20px;
}

.main-nav {
	background-color: map.get($theme, "bg-overlay") !important;

	.link:focus,
	.link:hover {
		background-color: transparent !important;
	}

	.search-form .search {
		background-color: map.get($theme, "bg-input") !important;
	}
}
.home-page {
	.text-content {
		background-color: map.get($theme, "bg-overlay");
	}
	.encouraging-message {
		background-color: transparent;
	}
	input {
		background-color: map.get($theme, "bg-input");
	}
}
.settings-page {
	.more-settings {
		border-radius: 0px;
		background-color: map.get($theme, "bg-input") !important;
	}
}
.related-videos, .search-page {
	background-color: map.get($theme, "bg-panel") !important;
	margin-top: 20px;
}
#below-video-container .below-video-radio-container label {
	cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
}
.channel-page {
	.channel-data {
		background-color: transparent !important;
		border-radius: 0px;
	}
	.channel-tabs-header .header.selected {
		background: none !important;
	}
	.channel-tabs-inner {
		background: none !important;
		border: none !important;
	}
	.videos {
		background-color: transparent !important;
		padding: 24px;
		padding-bottom: 0px;
	}
}
.video-list-item--watched {
	background: map.get($theme, "bg-overlay") !important;
}
.main-video-section {
	background-color: map.get($theme, "bg-panel");
	padding: none;
	margin: 20px;
	height: fit-content;

	.ctrlf5notice {
		border-bottom: 1px solid map.get($theme, "edge-grey")
	}

	.videoControls {
		--accent-color: #b44c4d !important;

		// Can't replace mixin so manually apply to the same elements.
		> button.active, > button:active,
		.settingsPopout .setting.active:not([disabled]) .icon,
		.settingsPopout .setting:active:not([disabled]) .icon,
		.settingsPopout .setting.active:not([disabled]) .submenuIcon,
		.settingsPopout .setting:active:not([disabled]) .submenuIcon {
			filter: saturate(0.25) brightness(4) !important;
		}

		.settingsPopout .setting:not(.header:not(.goBack)) {
			cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
		}

		.popout {
			background-color: map.get($theme, "bg-overlay") !important;
			backdrop-filter: blur(10px);
		}

		.timeline {
			.seek {
				cursor: url("/static/images/cursors/pointer.cur"), pointer !important;

				& + .fakeThumb {
					background-image: url(/static/images/eir-walk.gif);
					background-color: transparent !important;
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center bottom;
					image-rendering: -moz-crisp-edges;
					image-rendering: crisp-edges;
					image-rendering: pixelated;
					transform: translateY(-0.375em);
					scale: 2;
					border: none;

					transition: transform 0.2s;

					--outline-width: 1px;
					--outline-color: #00000080;
					filter:
						drop-shadow(calc(var(--outline-width) * -1) 0px var(--outline-color))
						drop-shadow(calc(var(--outline-width) *  1) 0px var(--outline-color))
						drop-shadow(0px calc(var(--outline-width) * -1) var(--outline-color))
						drop-shadow(0px calc(var(--outline-width) *  1) var(--outline-color));
				}

				&.paused + .fakeThumb {
					background-image: url(/static/images/eir-stand.png);
				}

				&:active + .fakeThumb {
					background-image: url(/static/images/eir-stand.png);
					transform: translateY(-0.625em);
				}
			}
		}
		.volumePopout .volumeBar {
			background-color: transparent !important;
		}
	}

	#sb-skip-prompt {
		background-color: map.get($theme, "bg-overlay") !important;
		backdrop-filter: blur(10px);
		cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
	}

	/* This doesn't seem to work... */
	.video::-webkit-media-controls-volume-slider,
	.video::-webkit-media-controls-play-button,
	.video::-webkit-media-controls-mute-button,
	.video::-webkit-media-controls-seek-back-button,
	.video::-webkit-media-controls-seek-forward-button,
	.video::-webkit-media-controls-fullscreen-button,
	.video::-webkit-media-controls-rewind-button,
	.video::-webkit-media-controls-toggle-closed-captions-button {
		cursor: url("/static/images/cursors/default.cur"), default !important;
	}
}
.description {
	background-color: transparent !important;
	--regular-background: transparent !important;
	--highlight-background: #2f323f !important; // uggghhh why
	font-size: inherit !important;

	.timestamp--active::after {
		border-color: var(--highlight-background);
	}
}
.comment-base {
	.comment-content, .comment-stats {
		cursor: url("/static/images/cursors/text.cur"), text !important;
	}
}
.footer__center {
	background-color: map.get($theme, "bg-overlay") !important;
}

.dearrow-button-list, .dearrow-button-video {
	cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
}