.logmedia-occupancy-rate-dialog {
	--logmedia-occupancy-rate-primary: #075985;
	--logmedia-occupancy-rate-primary-text: #fff;
	box-sizing: border-box;
	width: min(calc(100% - 2rem), 36rem);
	max-width: none;
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	overflow: auto;
	overscroll-behavior: contain;
	border: 0;
	border-radius: 0.75rem;
	background: #fff;
	color: #17202a;
	box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 32%);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 100%;
	line-height: 1.5;
}

.logmedia-occupancy-rate-dialog::backdrop {
	background: rgb(10 20 30 / 72%);
}

.logmedia-occupancy-rate-dialog__content {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem 1rem;
	padding: clamp(1.25rem, 5vw, 2rem);
}

.logmedia-occupancy-rate-dialog__icon {
	display: inline-grid;
	grid-row: 1 / span 2;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--logmedia-occupancy-rate-primary);
	color: var(--logmedia-occupancy-rate-primary-text);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
}

.logmedia-occupancy-rate-dialog__title {
	margin: 0;
	color: #17202a;
	font: 700 clamp(1.3rem, 5vw, 1.75rem) / 1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.logmedia-occupancy-rate-dialog__message {
	grid-column: 1 / -1;
	margin: 0.5rem 0;
	color: #17202a;
	font: inherit;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.logmedia-occupancy-rate-dialog__close {
	grid-column: 1 / -1;
	min-height: 3rem;
	padding: 0.75rem 1.25rem;
	border: 2px solid var(--logmedia-occupancy-rate-primary);
	border-radius: 0.4rem;
	background: var(--logmedia-occupancy-rate-primary);
	color: var(--logmedia-occupancy-rate-primary-text);
	font: 700 1rem / 1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	cursor: pointer;
}

.logmedia-occupancy-rate-dialog__close:hover {
	border-color: var(--logmedia-occupancy-rate-primary);
	background: var(--logmedia-occupancy-rate-primary);
	filter: brightness(0.85);
}

.logmedia-occupancy-rate-dialog__close:focus-visible {
	outline: 0.25rem solid #f59e0b;
	outline-offset: 0.2rem;
}

@media (min-width: 40rem) {
	.logmedia-occupancy-rate-dialog__content {
		grid-template-columns: auto 1fr auto;
		align-items: center;
	}

	.logmedia-occupancy-rate-dialog__icon {
		grid-row: 1;
	}

	.logmedia-occupancy-rate-dialog__message {
		grid-column: 1 / -1;
	}

	.logmedia-occupancy-rate-dialog__close {
		grid-column: 3;
		min-width: 8rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.logmedia-occupancy-rate-dialog[open] {
		animation: logmedia-occupancy-rate-dialog-enter 180ms ease-out;
	}

	.logmedia-occupancy-rate-dialog__close {
		transition: background-color 160ms ease, border-color 160ms ease;
	}

	@keyframes logmedia-occupancy-rate-dialog-enter {
		from {
			opacity: 0;
			transform: translateY(0.75rem) scale(0.98);
		}

		to {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.logmedia-occupancy-rate-dialog,
	.logmedia-occupancy-rate-dialog * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}