@import "/assets/css/open-props.min.css";
@import "/assets/css/normalize.min.css";
/* Global */
@import "/assets/css/global/variables.css";
@import "/assets/css/global/global-styles.css";
/* Blocks */
@import "/assets/css/blocks/flash.css";
@import "/assets/css/blocks/action-bar.css";
@import "/assets/css/blocks/sidebar.css?v=2";
@import "/assets/css/blocks/button.css";
@import "/assets/css/blocks/logo.css";
@import "/assets/css/blocks/test-result.css";

/* Compositions */
@import "/assets/css/composition/flex-row.css";

/* Utilities */
@import "/assets/css/utilities/flow.css";
@import "/assets/css/utilities/text.css";
@import "/assets/css/utilities/justify-content.css";
@import "/assets/css/utilities/form-group.css";
@import "/assets/css/utilities/button-group.css";
@import "/assets/css/utilities/grid.css";
@import "/assets/css/utilities/flex.css";

.container {
	display: grid;
	grid: [stack] 1fr / min-content [stack] 1fr;
	min-height: 100vh;
}

@media (max-width: 540px) {
	/* Stack elements on top of eachother with 2nd area being on top */
	.container > * {
		grid-area: stack;
	}
}

#sidenav-open {
	 --easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
	 --duration: .6s;

	display: grid;
	grid-template-columns: [nav] 2fr [escape] 1fr;
}

#sidenav-button {
	padding-right: var(--size-3);
}

/* Modals shouldn't include sidenav button */
up-modal-content #sidenav-button {
	display: none;
}

@media (min-width: 540px) {
	#sidenav-button,
	#sidenav-close {
		display: none;
	}
}

@media (max-width: 540px) {
	#sidenav-open {
		visibility: hidden;
		transform: translateX(-110vw);
		will-change: tranform;
		transition: 
			transform var(--duration) var(--easeOutExpo),
			visibility 0s linear var(--duration);

	}

	#sidenav-open[aria-hidden="false"] {
		visibility: visible;
		transform: translateX(0);
		transition: transform var(--duration) var(--easeOutExpo);
	}
}

@media (prefers-reduced-motion: reduce) {
	#sidenav-open {
		--duration: 1ms;
	}
}

@media (prefers-color-scheme: dark) {
	#sidenav-button {
		color: white;
	}
}

.content {
	background-color: white;
	max-width: var(--size-lg);
	overflow: auto;
	padding: var(--size-3);
}

@media (prefers-color-scheme: dark) {
	.content {
		background-color: var(--surface-2);
	}
}

table-wrapper {
	display: block;
	overflow: auto;
}

table {
	border-collapse: collapse;
}

table[data-width="full"] {
	width: 100%;
}

table thead {
	background-color: var(--surface-3);
}

table thead th {
	font-weight: var(--font-weight-6);
	font-size: 0.875rem;
	padding: var(--size-2);
}

table tbody td {
	padding: var(--size-2);
	white-space: nowrap;
}

.status {
	align-items: center;
	display: grid;
	grid-template-columns: 20px 1fr;
}

.status[data-status="error"] {
	color: var(--red-5);
}

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

.status[data-status="paused"] {
	color: var(--gray-5);
}

.status[data-status="pending"] {
	color: var(--gray-5);
}

#check_details {
	--grid-container-min: 18ch;
}

@media (prefers-color-scheme: dark) {
	up-modal-box, up-drawer-box, up-cover-box, up-popup {
		background-color: var(--surface-1);
	}
}

body[data-layout="isolated"] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

form#sign_in,
form#sign_up {
	background: white;
	border-radius: var(--radius-2);
	box-shadow: var(--shadow-1);
	margin: var(--size-5);
	min-width: var(--size-xs);
	padding: var(--size-6) var(--size-6);
}

@media (prefers-color-scheme: dark) {
	form#sign_in, form#sign_up {
		background: var(--surface-2);
	}
}

.card {
	border: 1px solid var(--surface-4);
	padding: var(--size-2);
}

.card p {
	font-size: var(--font-size-1);
}