/* GENERIC */

* {
	scrollbar-color: var(--accent-text) var(--invert-background);
}
*::-webkit-scrollbar,
*::-webkit-scrollbar-corner {
	background: var(--invert-background);
}
*::-webkit-scrollbar-thumb {
	background: var(--background);
    border: 2px solid var(--invert-background);
    border-radius: 4px;
}
*::-webkit-scrollbar-button:vertical {
	background: center / 10px auto no-repeat transparent;
}
*::-webkit-scrollbar-button:vertical:start {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI0MCI+PHBvbHlnb24gcG9pbnRzPSIyNSwwIDAsNDAgNTAsNDAiIGZpbGw9IiNmZmYiIC8+PC9zdmc+");
}
*::-webkit-scrollbar-button:vertical:end {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI0MCI+PHBvbHlnb24gcG9pbnRzPSIyNSw0MCAwLDAgNTAsMCIgZmlsbD0iI2ZmZiIgLz48L3N2Zz4=");
}
*::-webkit-scrollbar-button:horizontal {
	background: center / auto 10px no-repeat transparent;
}
*::-webkit-scrollbar-button:horizontal:start {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI1MCI+PHBvbHlnb24gcG9pbnRzPSI0MCwwIDQwLDUwIDAsMjUiIGZpbGw9IiNmZmYiIC8+PC9zdmc+");
}
*::-webkit-scrollbar-button:horizontal:end {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI1MCI+PHBvbHlnb24gZmlsbD0iI2ZmZiIgcG9pbnRzPSIwLDAgMCw1MCA0MCwyNSI+PC9wb2x5Z29uPjwvc3ZnPg==");
}
*::-webkit-scrollbar-button:start:increment,
*::-webkit-scrollbar-button:end:decrement
{
    display: none;
}

.has-info {
	cursor: help;
}

/* Content */

.customiser {
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: 0fr auto;
	grid-template-areas: "top top" "sidebar main";
}

/* Select */

.select {
	padding: 4px 20px 4px 4px;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI0MCI+PHBvbHlnb24gcG9pbnRzPSIyNSw0MCAwLDAgNTAsMCIgZmlsbD0iI2Q4ZDhkOCIgLz48L3N2Zz4=") calc(100% - 6px) center / 12px auto no-repeat;
	border: 2px solid var(--border-light);
	border-radius: 4px;
	font: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Checkbox toggles */

.toggle {
	--hover-offset: 2px;
	display: block;
	width: 32px;
	height: 16px;
	background: #efefef;
	border: 2px solid var(--border-light);
	border-radius: 8px;
	transition: background-color 0.1s ease;
	cursor: pointer;
}
.toggle::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: var(--text);
	border: 2px solid var(--border-light);
	box-sizing: border-box;
	border-radius: 8px;
	margin: -2px 0 0 -2px;
	transition: 0.1s ease;
	transition-property: transform, background-color;
}
.toggle:hover::after {
	background-color: var(--accent);
	transform: translateX(var(--hover-offset));
}

input:checked + .toggle {
	background: #2e51a2af;
}
input:checked + .toggle::after {
	background-color: var(--accent);
	transform: translateX(16px);
}
input:checked + .toggle:hover::after {
	transform: translateX(calc(16px - var(--hover-offset)));
}

.toggle.is-disabled {
	cursor: not-allowed;
}
.toggle.is-disabled::after {
	--hover-offset: 0;
	background: #a2512e;
}

input:checked + .toggle.is-forced {
	background: #2ea251af;
}
input:checked + .toggle.is-forced::after {
	--hover-offset: 0;
	background: #2ea251;
	transform: translateX(16px);
}


/* Expando */

.expando {
	--margin: 5px;
	position: relative;
	z-index: 0; /* anchors child z-index values to prevent overlap with nested expandos */
	left: calc(var(--margin) * -1);
	width: calc(100% + var(--margin) * 2);
	padding: 0 var(--margin);
	overflow: hidden;
}
.expando::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
	height: 40px;
	background: linear-gradient(0deg, var(--background) 25px, transparent);
	transition: scale 0.2s ease-in;
	transform-origin: bottom;
	pointer-events: none;
}
.expando.is-innert::after {
	content: none;
}
.expando.is-expanded::after {
	scale: 1 .625;
	transition-delay: 0.1s;
}
.expando--inline::after {
	scale: 1 .5;
}

.expando__button {
	position: absolute;
	bottom: 0;
	left: var(--margin);
	z-index: 1;
	padding: 3px 6px;
	background: none;
	border: none;
	margin: 0;
	color: inherit;
	font-size: 14px;
	font-weight: bold;
	font-family: inherit;
	cursor: pointer;
}
.expando__button--subtle {
	font-weight: 400;
}
.expando__button--inline {
	padding: 0;
	font-size: inherit;
}


/* BBCode */

.bb {
	margin: 0;
}

.bb-list {
	padding-left: 16px;
	margin: 4px 0;
}



/* Topbar */

.topbar {
	position: relative;
	z-index: 10;
	display: flex;
	background: var(--invert-background);
	justify-content: space-between;
	flex-flow: row wrap;
	grid-area: top;
}

.topbar__section {
	float: var(--place);
	display: flex;
	height: 50px;
	margin: 0 15px;
	align-items: center;
	flex-shrink: 0;
}
.topbar__section--right {
	margin-left: auto;
}


/* Options */

.options {
	position: relative;
	display: grid;
	place-content: center;
}

.options__container {
	position: absolute;
	top: 50px;
	right: 0;
	display: flex;
	flex-flow: column wrap;
	align-items: start;
	padding: 16px;
	background: var(--background);
	border: 2px solid var(--accent);
	border-radius: 8px;
	transition-property: transform, opacity;
	transition-timing-function: ease;
	transition-duration: 0.1s;
}
.options__container.is-hidden {
	opacity: 0;
	transform: scale(0.9);
	transition-duration: 0.2s;
	pointer-events: none;
}

.options__item + .options__item {
	margin-top: 8px;
}

.options__title {
	display: block;
	white-space: nowrap;
	margin-bottom: 4px;
}


/* Preview Notice */

.discrepancy-notice {
	position: relative;
	height: 30px;
	margin-right: 15px;
	cursor: help;
}

.discrepancy-notice__title {
	color: var(--accent-text);
	line-height: 30px;
}

.discrepancy-notice__body {
	position: absolute;
	top: 50px;
	z-index: 1;
	width: 100%;
	padding: 15px;
	border: 2px solid var(--border-light);
	background: var(--background);
	border-radius: 8px;
	transition: opacity 0.15s ease-out;
	opacity: 0;
	pointer-events: none;
}
.discrepancy-notice:hover .discrepancy-notice__body {
	opacity: 1;
}



/* Sidebar Scrollbar */

.sidebar:not(:hover)::-webkit-scrollbar-thumb {
	background: var(--invert-background);
}
.sidebar:not(:hover)::-webkit-scrollbar-button:vertical {
	background: var(--invert-background);
}

/* Sidebar */

:root {
	--sidebar-width: calc(350px + 5vw);
}

.sidebar-container {
	grid-area: sidebar;
	width: var(--sidebar-width);
	overflow-x: hidden;
	transition: margin-left 0.5s ease;
}
.sidebar-container.is-aside {
	margin-left: calc(var(--sidebar-width) * -1 + 4px);
}

.sidebar-container__wrapper {
	display: flex;
	flex-flow: row nowrap;
	height: 100%; /* limit height */
	transition: translate 0.18s cubic-bezier(.46,.03,.52,.96);
}

.sidebar {
	/* flex display ensures .sidebar__inner display at max height */
	display: flex;
	flex-direction: column;
	width: var(--sidebar-width);
	overflow-x: hidden;
	overflow-y: auto;
	border-right: 2px solid var(--invert-background);
	flex: 0 0 auto;
	transition: scrollbar-color .18s ease-out;
	scrollbar-color: var(--invert-background) var(--invert-background);
}
.sidebar--right {
	direction: rtl;
	border-right: none;
	border-left: 2px solid var(--invert-background);
}
.sidebar:hover {
	scrollbar-color: var(--accent-text) var(--invert-background);
}

.sidebar__inner {
	direction: ltr;
	border: inherit;
	flex-grow: 1;
}

/* Rounded accent */

.rounds {
	position: sticky;
	top: 0;
	z-index: 1;
	height: 0;
	background: linear-gradient(to bottom, var(--background), transparent);
	pointer-events: none;
}

@supports (mask-image: url()) or (-webkit-mask-image: url()) {
	.rounds::before,
	.rounds::after {
		position: absolute;
		top: 0;
		width: 20px;
		height: 20px;
		background: var(--invert-background);
		pointer-events: none;
		--svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PGRlZnM+PG1hc2sgeD0iMCIgeT0iMCIgaWQ9ImNpcmNsZSIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48cmVjdCBmaWxsPSJ3aGl0ZSIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+PGNpcmNsZSBmaWxsPSJibGFjayIgY3g9IjIwIiBjeT0iMjAiIHI9IjIwIj48L2NpcmNsZT48L21hc2s+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgZmlsbD0iYmxhY2siIG1hc2s9InVybCgjY2lyY2xlKSI+PC9yZWN0Pjwvc3ZnPg==");
		-webkit-mask-image: var(--svg);
		mask-image: var(--svg);
		-webkit-mask-size: 40px 40px;
		mask-size: 40px 40px;
	}
	.rounds--left::before {
		content: "";
		left: 0;
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
	.rounds--right::after {
		content: "";
		right: 0;
		-webkit-mask-position: -20px 0;
		mask-position: -20px 0;
	}
}

/* Sections */

.sidebar__section {
	padding: 0 16px 16px;
	border-bottom: 2px dotted var(--border-heavy);
	margin: 0 0 16px;
	scrollbar-color: var(--border-heavy) transparent;
}
.sidebar__section--no-border {
	border: 0;
}
.sidebar__section--top {
	padding-top: 16px;
}

.theme-tag {
	display: inline-block;
	height: 24px;
	padding: 3px 6px;
	border: 2px solid var(--text);
	border-radius: 4px;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 900;
	vertical-align: top;
}

.theme-desc {
	display: block;
	margin-top: 6px;
	color: var(--text-light);
}

.sidebar__header {
	font-size: 1.3em;
	margin: 0 0 8px;
}

.sidebar__header-aside {
	float: right;
	height: 0px;
	font-size: 14px;
	font-weight: normal;
}


/* Options/Mods/Sidebar sub-content */

.entry {
	padding-top: 8px;
	border-top: 2px dotted var(--border-light);
	margin: 8px 0 0;
}
.entry.is-hidden-by-tag {
	display: none;
}

.entry__head {
	display: flex;
}
.entry__name {
	display: block;
	width: 50%;
	flex: 2 0 auto;
	font-weight: 400;
}
.entry__name--emphasised {
	font-weight: 700;
}

.entry__desc {
	margin-top: 4px;
	font-size: 0.9em;
}

.entry__details {
	display: block;
	font-weight: bold;
	margin-top: 4px;
	transition: 0.18s ease;
	transition-property: opacity, margin-top;
}
.entry:not(.is-enabled) .entry__details {
	opacity: 0;
	pointer-events: none;
	margin-top: -1.3em;
}

.entry__help {
	float: right;
	font-size: 12px;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.entry.is-option:hover .entry__help {
	opacity: 1;
}

.entry__textarea {
	min-height: 1.3em;
	height: 3.9em;
	max-height: 70vh;
}

/* entry inputs */

.entry__inputs {
	display: flex;
	align-items: center;
	margin-top: 4px;
}

.entry__colour {
	position: relative;
	width: 54px;
	height: 24px;
	background: var(--border-light);
	border-radius: 12px;
	cursor: pointer;
	overflow: hidden;
}

.entry__colour:not(.entry__colour--strip-alpha)::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
	width: 55%;
	height: 24px;
	border-radius: 12px;
	background: url(../picker/alpha.png) repeat;
}
.entry__colour::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: inherit;
}

.entry__info {
	color: var(--text-light);
	font-size: 9px;
	margin: 0 0 8px 8px;
}

.entry__reset {
	background: none;
	border-color: transparent;
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	order: 3;
	opacity: 0.1;
	transition: opacity 0.2s ease;
}
.entry.is-option:hover .entry__reset {
	opacity: .35;
}
.entry.is-option:hover .entry__reset:hover {
	opacity: 1;
}

/* entry external link */

.entry__external-link {
	color: var(--text);
}
.entry__external-link:hover {
	color: var(--accent);
}
.entry__external-link-icon {
	font-size: 16px;
}

.entry__select {
	margin: 0 0 8px;
	min-width: 100px;
}

.entry__options {
	display: none;
}
.entry.is-enabled .entry__options {
	display: block;
	padding-left: 15px;
	border-left: 1px solid var(--border-light);
}



/* Info Box */

.info-box {
	--box-accent: var(--accent);
	position: relative;
	display: block;
	padding: 6px 6px 6px 13px;
	background: var(--box);
	border-left: 2px solid var(--box-accent);
	margin: 0 0 8px;
}
.info-box--error {
	--box-accent: var(--accent--error);
}
.info-box--indented {
	margin-left: 8px;
}

.info-box::before {
	content: "?";
	position: absolute;
	top: calc(50% - 8px);
	left: -9px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--box-accent);
	color: var(--accent-text);
	text-align: center;
}
.info-box--error::before {
	content: "!";
}

.info-box__list {
	padding-left: 14px;
	margin: 6px 0 0 0;
}


.code__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}
.code__title {
	display: block;
	border-radius: 4px 4px 0 0;
	padding: 6px;
	background: #212127;
	margin-bottom: -4px;
	color: #fff;
	font-weight: 700;
}

.code__preview {
	height: 10em;
}


.alert-button {
	display: flex;
	padding: 10px;
	background: var(--background);
	box-shadow: 1px 2px 4px rgba(0,0,0,0.2);
	border: 2px solid var(--border-light);
	border-radius: 8px;
	margin-bottom: 12px;
	cursor: pointer;
	color: var(--accent);
	font: inherit;
	text-align: left;
	transition: transform 0.18s cubic-bezier(.3,.85,.63,1.2);
}
.alert-button:hover {
	transform: scale(1.02);
}

.alert-button__icon {
	display: flex;
	width: 20px;
	place-content: center;
	align-self: center;
	margin-right: 8px;
	font-size: 20px;
}

.alert-button__title {
	font-size: 14px;
	font-weight: 700;
}

.alert-button__subtext {
	margin: 0;
	font-size: 12px;
}


/* Columns */

.columns {
	display: flex;
	flex-flow: row wrap;
	padding: 8px 0;
}

.columns__wrapper {
	width: 50%;
	flex-grow: 1;
}

.columns__glue {
	display: flex;
}

.columns__header {
	display: block;
	margin-bottom: 4px;
	font-weight: 700;
}

.columns__split {
	display: flex;
	flex-flow: column nowrap;
	width: 138px;
	max-width: 190px;
	flex: 1 0 auto;
}

.columns__split-header {
	display: block;
	font-weight: 700;
	margin-bottom: 5px;
}

.columns__item {
	white-space: nowrap;
	margin-right: 8px;
}

.columns__check {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--border-light);
	border-radius: 4px;
	vertical-align: top;
	margin-top: .15em;
}
.columns__check::before {
	display: block;
	text-align: center;
	color: var(--accent-text);
	font-size: 12px;
	line-height: 12px;
}

.columns__check--checked {
	background: var(--accent);
	border-color: var(--accent);
}
.columns__check--checked::before {
	content: "✔";
}

.columns__check--optional {
	border-color: rgb(29, 122, 35);
}
.columns__check--optional::before {
	content: "—";
	color: rgb(29, 122, 35);
}

.columns__legend {
	width: 100%;
	flex-shrink: 0;
	margin-top: 8px;
}

.columns__legend-list {
	display: flex;
}



/* PREVIEW */

.preview {
	position: relative;
	width: 100%;
	height: 100%;
	flex: 1 1 auto;
	overflow: hidden;
	grid-area: main;
}
.preview--left {
	grid-area: sidebar;
}

.preview__window-wrapper {
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}

.preview__window {
	min-width: 1160px;
	width: 100%;
	min-height: 100%;
	border: none;
}
.preview__window--dynamic {
	min-width: auto;
}
.preview__window--dimmed {
	filter: brightness(0.5);
	transition: filter 0.3s ease;
}
.preview__window--dimmed:hover {
	filter: none;
	transition-duration: 0.5s;
	transition-delay: 0.1s;
}



/* Preview Slider Button */

.slider {
	position: absolute;
	left: 0;
	top: calc(50vh - 3em);
	display: flex;
	align-items: center;
	width: 1.5em;
	height: 3em;
	background: var(--invert-background);
	border-radius: 0 1.5em 1.5em 0;
	cursor: pointer;
	transition: box-shadow 0.18s ease;
}
.slider:hover {
	box-shadow: 0 0 0 15px rgb(0 0 0 / 50%);
}

.slider__icon {
	margin-left: 2px;
	color: var(--accent-text);
	font-size: 1.5em;
	transition: transform 0.5s ease;
}
.slider.is-active .slider__icon {
	transform: scaleX(-1);
}

.slider__text {
	text-indent: -9999px;
}



/* Stepped list */

.steps {
	padding-left: 30px;
	counter-reset: steps;
	font-size: 14px;
}

.steps__step {
	position: relative;
	min-height: 24px;
	counter-increment: steps;
}
.steps__step + .steps__step {
	margin-top: 8px;
}

.steps__step::marker {
	content: none;
}

.steps__step::before {
	content: counter(steps);
	position: absolute;
	left: -30px;
	width: 24px;
	height: 24px;
	background: var(--accent);
	border-radius: 50%;
	color: var(--accent-text);
	text-align: center;
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
}
.steps__step--optional::before {
	content: "*";
}
.steps__step--blank::before {
	content: none;
}


/* Colour picker */

.dynamic-popup--picker {
	z-index: 14;
	width: 810px;
	height: 510px;
}
.dynamic-popup--picker.is-visible {
	pointer-events: auto;
}

.dynamic-popup__frame {
	width: 100%;
	height: 100%;
	border: none;
}

.dynamic-popup__close {
	position: absolute;
	top: -16px;
	right: -16px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	border: 2px solid var(--border-light);
	background: var(--background);
	border-radius: 4px;
	box-shadow: 1px 1.5px 3px rgba(0,0,0,.3);
}

/* Dummy Theme Unit to replicate MyAnimeList appearance */

.dummy-theme-unit {
	display: block;
	background-color: #e1e7f5;
	border: #bebebe 1px solid;
	width: 170px;
	margin-bottom: 8px;
	box-sizing: content-box;
	font-family: 11px/1 Verdana, Arial, sans-serif;
	text-align: center;
	text-decoration: none;
}

.dummy-theme-unit__name {
	padding: 2px 0;
	margin-bottom: 3px;
	color: #1c439b;
	pointer-events: none;
}

.dummy-theme-unit__image {
	display: block;
	margin-bottom: 3px;
	opacity: .75;
	pointer-events: none;
}

.dummy-theme-unit__selection {
	padding: 4px 0;
	pointer-events: none;
}

.dummy-theme-unit__label {
	display: inline-block;
	padding: 1px 4px;
}



/* option dummy div */

.dummy {
	position: fixed;
	top: -9999px;
	left: -9999px;
	width: 100px;
	height: 100px;
}