/* Copyright © 2024 Apeleg Limited. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License") with LLVM
 * exceptions; you may not use this file except in compliance with the
 * License. You may obtain a copy of the License at
 *
 * http://llvm.org/foundation/relicensing/LICENSE.txt
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'tailwindcss/preflight.css';
@import 'tailwindcss/theme.css';

@theme {
	--font-sans: 'Poppins', 'DejaVu Sans', 'Verdana', 'Noto Sans', 'sans';
	--font-serif:
		'ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif';
	--font-mono:
		'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
		'Liberation Mono', 'Courier New', 'monospace';
	--default-font-family: --theme(--font-sans, initial);
}

:elementid(LOADING_ELEMENT_ID_) {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #f2f0f0;
}

:elementid(LOADING_ANIMATION_ELEMENT_ID_) {
	display: flex;
	position: relative;
	width: auto;
	height: 100%;
}

@media not (writing-mode: tb-lr) {
	:elementid(LOADING_ANIMATION_ELEMENT_ID_) {
		inline-size: auto;
		block-size: 100%;
	}
}

:elementid(LOADING_ANIMATION_ELEMENT_ID_)::after {
	content: '';
	font-size: 6rem;
	border-radius: 9999px;
	border: 0 solid transparent;
	padding: 0.75rem;
	margin: 0 auto;
	background-image:
		linear-gradient(white, white),
		linear-gradient(to left, #431c01, #a26135);
	background-origin: border-box;
	background-clip: content-box, border-box;
	color: transparent;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.2em;
	height: 1.2em;
	transform: translate(-50%, -50%);
	animation: 5s ease-out 0s infinite loading-animation-bg-KF_;
}

@media not (writing-mode: tb-lr) {
	:elementid(LOADING_ANIMATION_ELEMENT_ID_)::after {
		margin-inline: auto;
		margin-block: 0;
	}
}

@keyframes loading-animation-bg-KF_ {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	50% {
		transform: translate(-50%, -50%) rotate(270deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

:elementid(LOADING_TEXT_ELEMENT_ID_) {
	font-size: 2.5rem;
	padding: 2rem 0;
	display: block;
	margin: 0 auto 2rem auto;
	text-align: center;
	width: auto;
	height: 50%;
	text-transform: uppercase;
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		'Open Sans',
		'Helvetica Neue',
		sans-serif;
	color: #111;
}

@media not (writing-mode: tb-lr) {
	:elementid(LOADING_TEXT_ELEMENT_ID_) {
		padding-inline: 0;
		padding-block: 2rem;
		margin-inline: auto;
		margin-block: 0 2rem;
		inline-size: auto;
		block-size: 50%;
	}
}

:elementid(ERROR_WARNING_CONTAINER_ELEMENT_ID_),
:elementid(NOSCRIPT_WARNING_CONTAINER_ELEMENT_ID_) {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	margin: 0;
	padding: 0;
	background: #ffffff;
}

:elementid(ERROR_WARNING_TEXT_CONTAINER_ELEMENT_ID_),
:elementid(NOSCRIPT_WARNING_TEXT_CONTAINER_ELEMENT_ID_) {
	display: block;
	background-color: #ffffde;
	border-bottom: 2px solid #8c8475;
	margin: 0;
	padding: 2rem;
	width: 100%;
}

:elementid(ERROR_WARNING_TEXT_ELEMENT_ID_),
:elementid(NOSCRIPT_WARNING_TEXT_ELEMENT_ID_) {
	display: block;
	color: #333;
	width: 1024px;
	height: auto;
	max-width: 100%;
	max-height: none;
	font-size: 2.5rem;
	margin: 0 auto;
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		'Open Sans',
		'Helvetica Neue',
		sans-serif;
}

@media not (writing-mode: tb-lr) {
	:elementid(ERROR_WARNING_TEXT_ELEMENT_ID_),
	:elementid(NOSCRIPT_WARNING_TEXT_ELEMENT_ID_) {
		inline-size: 1024px;
		block-size: auto;
		max-inline-size: 100%;
		max-block-size: auto;
		margin-inline: auto;
		margin-block: 0;
	}
}

:elementid(ERROR_ELEMENT_ID_) {
	display: none;
}

html,
:host {
	direction: --x-direction();
	text-orientation: --x-text-orientation();
	writing-mode: --x-writing-mode();
}

@media (prefers-color-scheme: dark) {
	html,
	:host {
		filter: invert(1) hue-rotate(180deg);
	}
}

@media (prefers-color-scheme: dark) and (forced-colors: active) {
	html,
	:host {
		filter: initial;
	}
}
