@import "../fonts/source-sans-3/source-sans-3.css";
@import "../fonts/yanone-kaffeesatz/yanone-kaffeesatz.css";
@import "../fonts/jetbrains-mono/jetbrains-mono.css";

:root {
	--color-background: #1e192b;
	--color-text: #eeeeee;
	--color-subwhite: #f9fad3;
	--color-green: #c3e88d;
	--color-blue: #4eb0e4;
	--color-violet: #a48aec;
	--color-yellow: #ffcb6b;
	--color-red: #ec4185;
	--color-black: var(--color-background-light);
	--color-separator: var(--color-background-light);
	--color-background-light: #282139;
	--color-background-lighter: #4f4271;
	--color-background-dark: #1b1627;
	--color-background-darker: #171320;

	/* font stacks */
	--font-stack-common: "Source Sans 3", system-ui, "Segoe UI", "Helvetica Neue", roboto, arial, sans-serif;
	--font-stack-heading: "Yanone Kaffeesatz", "Source Sans 3", system-ui, "Segoe UI", "Helvetica Neue", roboto, arial, sans-serif;
	--font-stack-code: "JetBrains Mono", monospace;

	/* font sizes */
	--font-size-base: 16px;
	--font-size-heading-1: 3.815rem;
	--font-size-heading-2: 3.052rem;
	--font-size-heading-3: 2.441rem;
	--font-size-heading-4: 1.953rem;
	--font-size-heading-5: 1.563rem;
	--font-size-heading-6: 1.25rem;

	/* gutters */
	--gutter-screen: 2rem;
	--gutter-screen-sm: calc(var(--gutter-screen) / 4);
	--gutter-screen-md: calc(var(--gutter-screen) / 2);

	/* sizes */
	--container-width: 25rem;

	/* ease */
	--ease-back-out: cubic-bezier(.295, 1.75, .69, .9);

	/* border-radiuses */
	--radius-root: .25rem;
	--radius-md: var(--radius-root);
	--radius-lg: calc(var(--radius-md) + var(--gutter-screen-md) / 2);
	--radius-xl: calc(var(--radius-lg) + var(--gutter-screen-md) / 2);

	scroll-behavior: smooth;
	scrollbar-gutter: stable;
}

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

html {
	text-size-adjust: 100%;
	tab-size: 4;
	box-sizing: border-box;
}

body {
	margin: 0;
	font: 400 var(--font-size-base)/1.25 var(--font-stack-common);
	background: var(--color-background);
	color: var(--color-text);
	transition: filter .25s var(--ease-back-out);
	filter: blur(0);

	&:has(dialog[open]) {
		filter: blur(3px);
	}

	@starting-style {
		filter: blur(0);
		transition: filter .25s var(--ease-back-out);
	}
}

h1, h2, h3, h4, h5 {
	font-family: var(--font-stack-heading);
	font-weight: 400;
	line-height: 1;
}

.button {
	cursor: pointer;
	background: var(--color-background-lighter);
	border: 1px solid var(--color-background-light);
	border-radius: var(--radius-md);
	padding: .5em 1em;
	color: var(--color-subwhite);
	transition: .25s var(--ease-back-out);
}

.page {
	container-type: inline-size;
	display: grid;
	min-height: 100dvh;
	/* stylelint-disable */
	grid-template-columns: 1fr clamp(10rem, 100vw, var(--container-width)) 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"Header Header Header"
		". Main ."
		"Footer Footer Footer";
	/* stylelint-enable */

	.header {
		grid-area: Header;
		padding: var(--gutter-screen);
		display: flex;
		gap: var(--gutter-screen-md);
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;

		.header-title {
			margin: 0;
			font: 400 var(--font-size-heading-3)/1 var(--font-stack-heading);
			color: var(--color-green);

			span {
				color: var(--color-blue);

				&::before {
					content: ":: ";
					color: var(--color-text);
				}
			}
		}

		@container (width < 650px) {
			flex-direction: column;
		}
	}

	.main {
		grid-area: Main;
		padding: var(--gutter-screen);
	}

	.footer {
		grid-area: Footer;
		padding: var(--gutter-screen);
		text-align: center;
	}
}

.logs-list {
	display: flex;
	flex-direction: column;
	gap: var(--gutter-screen-sm);
}

[data-status="idle"] {
	--log-primary: var(--color-background-lighter);
	--log-status: var(--color-subwhite);
	--log-border: var(--color-background-lighter);
}

[data-status="success"] {
	--log-primary: var(--color-green);
	--log-status: var(--color-green);
	--log-border: var(--color-green);
}

[data-status="failed"] {
	--log-primary: var(--color-red);
	--log-status: var(--color-red);
	--log-border: var(--color-red);
}

[data-status="build"] {
	--log-primary: var(--color-blue);
	--log-status: var(--color-blue);
	--log-border: var(--color-blue);
}

[data-status="test"] {
	--log-primary: var(--color-yellow);
	--log-status: var(--color-yellow);
	--log-border: var(--color-yellow);
}

.log {
	--timing: .5s;

	border-radius: var(--radius-md);
	background-color: var(--log-bg, var(--color-background-light));
	color: var(--log-color, var(--color-text));
	border: 1px solid transparent;
	border-color: var(--log-border, var(--color-background-lighter));
	transition: border-color var(--timing) var(--ease-back-out), background-color var(--timing) var(--ease-back-out), box-shadow var(--timing) var(--ease-back-out);

	&:hover,
	&:focus-visible {
		box-shadow: 0 0 5px color-mix(in srgb, var(--log-primary), #000000 65%);
	}

	.log-header {
		padding: var(--gutter-screen-md);
		display: grid;
		/* stylelint-disable */
		grid-template-columns: 1fr auto;
		grid-template-rows: repeat(2, auto);
		grid-template-areas:
			"Name Status"
			"Time Time";
		/* stylelint-enable */
		gap: .05rem var(--gutter-screen-md);
		align-items: center;
		cursor: pointer;
	}

	.log-title {
		grid-area: Name;
		margin-block: 0;
	}

	.log-time {
		grid-area: Time;
		font-style: italic;
		opacity: .75;

		&::first-letter {
			text-transform: uppercase;
		}
	}
}

.log-status {
	grid-area: Status;
	background-color: var(--log-status, var(--color-subwhite));
	color: var(--color-background-dark);
	font-family: var(--font-stack-common);
	border-radius: var(--radius-lg);
	padding-inline: var(--gutter-screen-sm);
	font-size: 80%;
	display: flex;
	align-items: center;
	transition: background-color .25s ease-in-out, color .25s ease-in-out;
}

.log-details-modal {
	background: var(--color-background);
	border: 1px solid var(--log-primary, var(--color-background-lighter));
	max-height: calc(100dvh - 2rem);
	border-radius: var(--radius-lg);
	padding: var(--gutter-screen-md);
	display: none;
	opacity: 0;
	flex-direction: column;
	gap: var(--gutter-screen-md);
	transition: .35s var(--ease-back-out);
	transition-behavior: allow-discrete;
	translate: 0 -1rem;

	&[open] {
		opacity: 1;
		display: flex;
		translate: 0 0;

		@starting-style {
			opacity: 0;
			translate: 0 -1rem;
		}

		&::backdrop {
			opacity: .75;
			display: block;
			filter: blur(5px);

			@starting-style {
				opacity: 0;
				filter: blur(0);
			}
		}
	}

	&::backdrop {
		opacity: .75;
		filter: blur(2px);
		background: color-mix(in oklab, var(--log-primary), var(--color-background-dark) 95%);
		transition: .25s var(--ease-back-out);
		transition-behavior: allow-discrete;
	}

	.log-details-name {
		margin-block: 0;
		display: inline-flex;
		align-self: flex-start;
		color: var(--log-primary);
		font-family: var(--font-stack-common);
		text-align: center;
		gap: var(--gutter-screen-md);
		transition: background-color .25s ease-in-out;
	}

	.log-details-code {
		overflow-y: scroll;
		padding: var(--gutter-screen-md);
		background: var(--color-background-light);
		color: var(--color-subwhite);
		border-radius: var(--radius-md);

		&::-webkit-scrollbar-track {
			background: none;
		}

		&::-webkit-scrollbar {
			width: 11px;
			background: none;
		}

		&::-webkit-scrollbar-thumb {
			border: 4px solid var(--color-background-light);
			border-radius: .5rem;
			transition: .25s var(--ease-back-out);
			background: var(--log-primary);
		}

		pre {
			white-space: break-spaces;
			margin: 0;
			font-family: var(--font-stack-code);
			font-size: .825rem;

			.hljs {
				font: inherit;
				background: none;
				padding: 0;
			}
		}
	}
}

.services-list {
	display: flex;
	gap: var(--gutter-screen-sm);

	.service {
		padding: .35rem var(--gutter-screen-sm);
		border-radius: var(--radius-md);
		background: var(--log-bg, var(--color-background-light));
		color: var(--log-color, var(--color-text));
		font-size: .85rem;
		border: 1px solid var(--color-status, var(--color-background-lighter));
		display: flex;
		position: relative;
		align-items: center;
		transition: border-color .25s var(--ease-back-out);
		gap: var(--gutter-screen-sm);

		&:is([data-status="online"]) {
			--color-status: var(--color-green);
		}

		&:is([data-status="offline"]) {
			--color-status: var(--color-red);
		}

		.status {
			color: var(--color-status);
			font-weight: 600;
			display: flex;

			svg {
				width: 1em;
				display: none;
				transition: fill .25s var(--ease-back-out);
				fill: var(--color-status);
			}
		}

		&:not([data-status]) {
			[data-icon="load"] {
				display: block;
			}
		}

		&[data-status="online"] {
			[data-icon="online"] {
				display: block;
			}
		}

		&[data-status="offline"] {
			[data-icon="offline"] {
				display: block;
			}
		}

		&::after {
			content: attr(data-time);
			position: absolute;
			top: calc(100% + 8px);
			background: var(--color-background);
			border: 1px solid var(--color-status);
			padding: .15em .45em;
			border-radius: 2px;
			transition: .2s var(--ease-back-out);
			opacity: 0;
			translate: 0 -15%;
		}

		&:where(:hover, :focus-visible)::after {
			opacity: 1;
			translate: 0 0;
		}
	}
}

.login-form {
	padding: var(--gutter-screen-md);
	background: var(--color-background-light);
	border: 1px solid var(--color-background-lighter);
	border-radius: var(--radius-lg);
	color: var(--color-text);

	.form-title {
		margin-block: 0 var(--gutter-screen-md);
		color: var(--color-green);
		font: 400 var(--font-size-heading-4)/1.25 var(--font-stack-heading);
		text-align: center;
	}

	.form {
		display: flex;
		flex-direction: column;
		gap: var(--gutter-screen-md);
	}

	label {
		color: var(--color-subwhite);
	}

	:where(input, button) {
		padding: var(--gutter-screen-sm) var(--gutter-screen-md);
		border-radius: var(--radius-md);
		font-family: var(--font-stack-common);
		font-size: var(--font-size-base);
		flex: 1;
	}

	input {
		--input-color: var(--color-text);
		--input-border: var(--color-background-lighter);

		background: var(--color-background);
		border: 1px solid var(--input-border);
		color: var(--input-color);

		&:focus-visible {
			--input-border: var(--color-blue);

			outline: none;
			box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text) 30%, transparent);
		}

		&:user-invalid {
			--input-color: var(--color-red);
			--input-border: var(--color-red);
		}

		&:user-valid {
			--input-color: var(--color-blue);
		}
	}

	.button {
		background: var(--color-blue);
		border: none;
		color: var(--color-text);
		cursor: pointer;
		transition: background-color .25s var(--ease-back-out);

		&:is(:hover, :focus) {
			background-color: color-mix(in srgb, var(--color-blue) 80%, black);
		}
	}

	.error {
		color: var(--color-red);
		margin-bottom: 1rem;
	}

	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:focus-visible,
	input:-webkit-autofill:active {
		font-size: 1rem;
		transition: background-color 5000s var(--ease-back-out) 0s;
		-webkit-text-fill-color: var(--input-color) !important;
		caret-color: var(--input-color);
	}
}