/*
Author: Vera Konigin
Contact: vera@groundedwren.com
File Description: CSS Reset
*/

*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	margin-block: 0;
	margin-inline: auto;
	max-width: 1900px;
	
	word-break: break-word;
	
	background-color: var(--background-color);
	color: var(--text-color);
}
html {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1em;
}
body {
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0px;
}

a {
	color: var(--link-color);
	
	&.full {
		padding: 4px;
		border-radius: 20px;
		background-color: var(--link-background-color);
	}
}

.sr-only {
	position: absolute !important;
	left: -99999999px;
	top: 0px;
}

.hide-until-focus {
	position: absolute;
	left: -99999999px;
	top: 0px;
	
	&:focus-within {
		position: revert;
		left: revert;
		top: revert;
	}
}

.hidden {
	display: none !important;
}

label:has(> :focus-visible), *:not(label) > :focus-visible, *[tabindex="-1"]:focus {
	outline-width: 4px !important;
	outline-color: var(--focus-color) !important;
	outline-style: solid !important;
	outline-offset: 1px !important;
	position: relative !important;
	z-index: 100 !important;
}
label > :focus-visible {
	outline: none !important;
}
*[tabindex="-1"]:focus {
	outline-style: dashed !important;
}

summary, label, input:is([type="checkbox"], [type="radio"]) {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

table, th, td {
	border: 1px solid;
	border-collapse: collapse;
}
table {
	width: 100%;
}
caption {
	font-style: italic;
}
thead {
	border-bottom: 2px solid;
	text-align: center;
	font-weight: bold;
}
tbody th {
	text-align: left;
}

footer {
	border-top: 1px solid color-mix(in oklab, var(--border-color), transparent 80%);
	font-size: 0.9em;
	background-color: color-mix(in oklab, var(--background-color-2), transparent 30%);
	padding: 2px
}

img {
	display: block;
}

:popover-open, dialog {
	color: var(--text-color);
	background-color: var(--background-color);
}

summary {
	min-height: auto;
	padding: 5px;

	&::marker {
		content: "";
	}
	&::-webkit-details-marker {
		display: none;
	}
}
summary, button[aria-expanded] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3px;

	&::before, &::after {
		content: "";
		display: inline-block;
		width: 0.5em;
		height: 0.5em;
		transform: rotate(45deg);
	}
	&::after {
		border-top: 2px solid var(--border-color);
		border-right: 2px solid var(--border-color);
	}
	&::before {
		border-bottom: 2px solid var(--border-color);
		border-left: 2px solid var(--border-color);
	}
}
details[open] summary, button[aria-expanded="true"] {
	&::after {
		border-top: none;
		border-right: none;
		border-bottom: 2px solid var(--border-color);
		border-left: 2px solid var(--border-color);
	}
	&::before {
		border-bottom: none;
		border-left: none;
		border-top: 2px solid var(--border-color);
		border-right: 2px solid var(--border-color);
	}
}
[dir="rtl"] :is(summary, button[aria-expanded]) {
	&::before, &::after {
		transform: rotate(225deg);
	}
}

button, input:is([type="button"], [type="submit"], [type="reset"]), input[type="file"]::file-selector-button, select, summary {
	--border-start-color: color-mix(in oklab, var(--link-color), #FFFFFF 30%);
	--border-end-color: color-mix(in oklab, var(--link-color), #000000 20%);
	
	background-color: var(--button-face-color);
	color: var(--button-text-color);

	border: 2.5px solid;
	border-block-start-color: var(--border-start-color);
	border-inline-start-color: var(--border-start-color);
	border-block-end-color: var(--border-end-color);
	border-inline-end-color: var(--border-end-color);
	cursor: pointer;
	min-width: 30px;
	min-height: 30px;
	user-select: none;
	-webkit-user-select: none;

	&:hover {
		background-color: color-mix(in oklab, var(--button-face-color), var(--selected-color) 35%);
	}
	&:active, &:open {
		background-color: color-mix(in oklab, var(--button-face-color), var(--selected-color) 65%);
		--border-start-color: color-mix(in oklab, var(--link-color), #000000 20%);
		--border-end-color: color-mix(in oklab, var(--link-color), #FFFFFF 30%);
	}
}

button[aria-pressed] {
	display: flex;
	flex-direction: row;
	gap: 3px;
	align-items: center;
	justify-content: center;

	&::before {
		content: "";
		display: inline-block;
		width: 0.6em;
		height: 0.6em;
		transform: rotate(45deg);
		border: 1px solid var(--border-color);
	}

	&[aria-pressed="true"] {
		&::before {
			background-color: var(--border-color);
		}
	}
}

button:is([aria-expanded="true"], [aria-pressed="true"]), details[open] summary {
	--border-start-color: color-mix(in oklab, var(--link-color), #000000 20%);
	--border-end-color: color-mix(in oklab, var(--link-color), #FFFFFF 30%);

	background-color: var(--selected-color);

	&:hover {
		background-color: color-mix(in oklab, var(--selected-color), var(--button-face-color) 20%);
	}
}

/** https://browserstrangeness.bitbucket.io/css_hacks.html#safari **/
@supports (-webkit-hyphens:none) {
	select {
		background-color: white;
		color: black;
	}
}

:is(button, select, input:is([type="button"], [type="submit"], [type="reset"]))[disabled], input[type="file"][disabled]::file-selector-button {
	text-decoration: line-through;
	border: 1px solid var(--border-color);
	opacity: 0.5;
	cursor: not-allowed;
}

input:is([type="text"], [type="password"], [type="number"], [type="email"], [type="date"], [type="time"]), textarea {
	color: var(--input-text-color);
	background-color: var(--input-background-color);
	border: 2px groove var(--border-color);
}

:is(input:is([type="text"], [type="password"], [type="number"], [type="email"], [type="date"], [type="time"]), textarea, select):invalid {
	box-shadow: -3px 0px 0px 0px var(--invalid-color);
	&:focus-within {
		box-shadow: inset 0px 0px 4px 2px var(--invalid-color), -3px 0px 0px 0px var(--invalid-color);
	}
}

textarea {
	min-height: 15px;
	min-width: 60px;
}

mark {
	background-color: var(--mark-color);
	color: var(--text-color);
}

form {
	button[type="submit"], button:not([type="reset"], [type="button"]), input[type="submit"] {
		border-width: 3px;
		font-weight: bold;
	}
}

.input-vertical {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
label:not(.input-vertical) {
	display: inline-flex;
	align-items: center;
	&:is(.text-after, :has(input:is([type="checkbox"], [type="radio"]), [role="switch"])) {
		padding-inline-end: 2px;
		:is(input, select, [role="switch"]) {
			margin-inline-end: 5px;
		}
	}
	&:not(:is(.text-after, :has(input:is([type="checkbox"], [type="radio"]), [role="switch"]))) :is(input, select) {
		margin-inline-start: 5px;
	}
	&.wide {
		> * {
			flex-grow: 1;
		}
	}
}

label:has(input:checked) {
	background-color: var(--selected-color);
}

.bubble-container {
	position: relative;

	.bubble {
		position: absolute;
		background-color: var(--background-color);
		padding: 4px;
		border: 1px solid var(--border-color);
		min-width: 200px;
		right: 0;
		z-index: 2;
	}

	.bubbler:not(:is([aria-expanded="true"], [open])) {
		.bubble {
			display: none;
		}
	}
}