/**
 * 1. Make the dialog container, and its child overlay spread across
 *    the entire window.
 */
.dialog-container,
.dialog-overlay {
	position: fixed; /* 1 */
	top: 0; /* 1 */
	right: 0; /* 1 */
	bottom: 0; /* 1 */
	left: 0; /* 1 */
}

/**
 * 1. Make sure the dialog container and all its descendants sits on
 *    top of the rest of the page.
 * 2. Make the dialog container a flex container to easily center the
 *    dialog.
 */
.dialog-container {
	z-index: 2; /* 1 */
	display: flex; /* 2 */
	max-height: calc(100vh - 1rem);
}

/**
 * 1. Make sure the dialog container and all its descendants are not
 *    visible and not focusable when it is hidden.
 */
.dialog-container[aria-hidden='true'] {
	display: none; /* 1 */
}

/**
 * 1. Make the overlay look like an overlay.
 */
.dialog-overlay {
	/*
background-color: rgb(43 46 56 / 0.9);
	background-color: hsl(322.67deg 41.28% 17.37% / 96%);
	background-color: hsl(322.67deg 41.28% 17.37% / 91%);
 */
	background-color: hsl(280deg 12% 13% / 90%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/**
 * 1. Vertically and horizontally center the dialog in the page.
 * 2. Make sure the dialog sits on top of the overlay.
 * 3. Make sure the dialog has an opaque background.
 */
.dialog-content {
	margin: auto;
	padding: 1rem;
	padding-top: 2.5rem;
	padding-bottom: 2rem;
	width: 100%;
	z-index: 2; /* 2 */
	position: relative; /* 2 */
	border-radius: var(--border-radius);
	background-color: var(--bg--light);
	overflow: scroll;
}


@media(min-width: 37.5em) {
	.dialog-content {
		padding-right: 2rem;
		padding-left: 2rem;
	}
}

/* Custom styles */

.dialog-container {
	margin: 0 auto;
	padding: 1rem;
	max-width: 40rem;
	overflow-x: scroll;
}


fieldset {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.rating-scores {
	row-gap: 0;
	column-gap: 3rem;
}

.dialog-add-new .rating-scores label {
	align-items: baseline;
	gap: 0.25rem;
}

/* Dialog lot summary */

.button-dialog-close[data-a11y-dialog-hide] {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
}

/* Override for bottom position */
.button-dialog-close--end {
	position: relative !important;
	right: 0.5rem;

}


.lot-summary .dialog-container {
	margin: 1rem;
}

@media(min-width: 37.5em) {
	.lot-summary .dialog-container {
		margin: auto;
	}
}