@import "./colour-scheme.css";
@import "./fonts.css";

:root {
	font-family: "Fira Sans", sans-serif;
	font-size: 18px;
	scrollbar-color: var(--colour-text) var(--colour-background-deep);
}

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}

* {
	box-sizing: border-box;
}

a {
	color: var(--colour-primary-contrast);
	&:visited {
		color: var(--colour-secondary);
	}
}

a.inline {
	color: inherit;
	text-decoration: underline dotted 2px;
	border-radius: .25rem;
	transition: background-color .25s linear;
	&:hover {
		background-color: color-mix(var(--colour-text) 20%, transparent);
	}
}

body, p, h1, h2, h3, h4, h5, h6, ul, ol, li {
	margin: 0;
	padding: 0;
}

h2 {
	font-size: 2rem;
	font-family: "Georgia", serif;
}

h3 {
	font-size: 1.5rem;
}

body {
	--content-padding: 5rem;
	--content-gap: 5rem;

	min-height: 100dvh;
	background-color: var(--colour-background);
	display: flex;
	flex-direction: column;

	>* {
		flex-grow: 0;
	}
	>main {
		flex-grow: 1;
	}
}

:root.light { .dark {
	display: none;
}}

:root:not(.light) { .light {
	display: none;
}}

main {
	width: 96dvw;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 80rem;
	margin: var(--content-gap) auto;
	gap: var(--content-gap);
}

a[class*="-button"] {
	padding: .25rem .5rem;
	text-decoration: none;
	border-radius: .25rem;
	user-select: none;
}

:root.colour-ready a[class*="-button"]:not([disabled]) {
	transition: border-color .25s ease-out, background .25s ease-out;
}

a.primary-button {
	color: var(--colour-deep);
	background: var(--colour-primary);
	border: 2px solid var(--colour-primary);

	&:hover {
		border: 2px solid var(--colour-primary-contrast);
		border-bottom-color: var(--colour-primary);
		background: var(--colour-primary-contrast);
	}
}

a.primary-button[disabled] {
	--fill-colour: color-mix(var(--colour-primary) 5%, var(--colour-background));

	color: var(--colour-text);
	background: var(--fill-colour);
	border: 2px solid var(--fill-colour);
	border-bottom-color: var(--colour-background);
	pointer-events: none;
}

.background-hatching {
	--hatching-opacity-primary: var(--custom-hatching-opacity-primary, 50%);
	--hatching-opacity-secondary: var(--custom-hatching-opacity-secondary, 35%);
	--default-colour: var(--custom-hatching-colour, light-dark(white, black));
	--hatching-colour-primary: var(--custom-hatching-colour-primary, var(--default-colour));
	--hatching-colour-secondary: var(--custom-hatching-colour-secondary, var(--default-colour));
	--hatching-angle: var(--custom-hatching-angle, 45deg);

	position: relative;

	&:before, &:after {
		content: "";
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		display: block;
		background: repeating-linear-gradient(var(--angle),
		            color-mix(var(--hatching-colour-primary) var(--hatching-opacity-primary), transparent) 0 .2rem,
		            color-mix(var(--hatching-colour-secondary) var(--hatching-opacity-secondary), transparent) .2rem .4rem);
		z-index: -1;
	}
	&:before {
		--angle: calc(var(--hatching-angle) * -1);

		left: 0;
	}
	&:after {
		--angle: var(--hatching-angle);

		right: 0;
	}

	>* {
		position: relative;
	}
}

.elliptic-icon {
	border-radius: 50%;

	>img {
		border-radius: inherit;
	}
}

.emoticon {
	white-space: nowrap;
}

@keyframes fade-in {
	0% {
		opacity: 0;
		pointer-events: none;
	}
	100% {
		opacity: 1;
		pointer-events: all;
	}
}

@keyframes bob {
	0%, 100% {
		transform: translate(0, var(--bob-dist, 1em));
	}
	50% {
		transform: translate(0, calc(var(--bob-dist, 1em) * -1));
	}
}

::selection {
	--colour-text-select: var(--colour-background);

	background-color: var(--colour-primary-contrast);
	color: var(--colour-text-select);
	text-decoration-color: var(--colour-text-select);
	text-shadow: none;
}