/**
 * The cart drawer.
 *
 * Carried from prototypes/mimi-homepage-v2.html, which designed this panel and
 * then left it out of the build: 380px, bone on slate, sliding in from the
 * right over 240ms. The prototype's values are kept; its selectors are not,
 * because .drawer and .line are too generic to put on a live site and mimi-core
 * names its blocks .mimi-<block>__<element> everywhere else.
 *
 * The prototype used an aside plus a .scrim div. This is a <dialog> opened with
 * showModal(), which gives Escape, a focus trap and inertness behind the panel
 * for free, and ::backdrop instead of the scrim.
 *
 * No cascade layer, so this beats Bricks' own @layer bricks rules at any source
 * order. That matters here: @layer bricks caps every .brxe-* at max-width 100%,
 * which is one of two reasons the panel is printed at wp_footer rather than
 * built in the builder.
 *
 * Bare rem is unsafe in this theme: html is font-size 10px, so 1rem renders at
 * 62.5% of intent. Everything below is px.
 *
 * @package mimi-core
 */

.mimi-drawer {
	/* A dialog is centred by its own margins, so the right edge is pinned with
	   margin-left rather than position:fixed. */
	width: 380px;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: var(--bone);
	color: var(--slate);
	transform: translateX(100%);
	transition: transform 240ms var(--ease);
}

.mimi-drawer[data-open] {
	transform: none;
}

.mimi-drawer::backdrop {
	background: rgba(14, 16, 16, .5);
	opacity: 0;
	transition: opacity 200ms ease-out;
}

.mimi-drawer[data-open]::backdrop {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mimi-drawer,
	.mimi-drawer::backdrop {
		transition: none;
	}
}

/* The inner div fills the dialog so a click on the dialog itself can only have
   come from the backdrop, which is what closes the panel. */
.mimi-drawer__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* The panel takes focus when it opens so no control looks pressed, and a
   container holding focus should not be ringed. */
.mimi-drawer__inner:focus {
	outline: none;
}

/* The controls keep their ring, in the site's own colour rather than the
   browser's black-on-white box. */
.mimi-drawer :focus-visible {
	outline: 2px solid var(--copper);
	outline-offset: 3px;
}

.mimi-drawer__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 26px 28px;
	border-bottom: 1px solid rgba(28, 33, 32, .12);
	flex: none;
}

.mimi-drawer__title,
.mimi-drawer__close {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.mimi-drawer__close {
	color: color-mix(in srgb, var(--slate) 60%, transparent);
	transition: color 150ms ease-out;
}

.mimi-drawer__close:hover,
.mimi-drawer__close:focus-visible {
	color: var(--slate);
}

/* A team order adds every area's rows at once, so this is the part that scrolls
   and the subtotal and buttons below it stay put. */
.widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
}

.mimi-drawer__lines {
	list-style: none;
	margin: 0;
	padding: 8px 28px;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.mimi-drawer__line {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: 14px;
	align-items: start;
	padding: 18px 0;
	border-bottom: 1px solid rgba(28, 33, 32, .08);
}

.mimi-drawer__line:last-child {
	border-bottom: 0;
}

/* Woo prints the remove link first in the source. Grid puts it in the third
   column anyway, so the markup order stays Woo's and the reading order stays
   name, then detail, then the way to remove it. */
.mimi-drawer__remove {
	grid-column: 3;
	grid-row: 1;
	font-size: 18px;
	line-height: 1;
	padding: 2px 4px;
	color: color-mix(in srgb, var(--slate) 40%, transparent);
	transition: color 150ms ease-out;
}

.mimi-drawer__remove:hover,
.mimi-drawer__remove:focus-visible {
	color: var(--slate);
}

.mimi-drawer__shot {
	grid-column: 1;
	grid-row: 1;
	display: block;
	width: 52px;
}

.mimi-drawer__shot img {
	width: 52px;
	height: 66px;
	object-fit: cover;
	display: block;
}

.mimi-drawer__detail {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.mimi-drawer__name {
	font-family: var(--font-display);
	font-size: 17px;
	line-height: 1.2;
	margin: 0;
	color: inherit;
}

.mimi-drawer__meta,
.mimi-drawer__qty {
	font-size: 13px;
	line-height: 1.6;
	margin: 5px 0 0;
	color: color-mix(in srgb, var(--slate) 60%, transparent);
}

.mimi-drawer__qty {
	color: var(--slate);
}

.mimi-drawer__sum {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 22px 28px 0;
	border-top: 1px solid rgba(28, 33, 32, .12);
	flex: none;
}

.mimi-drawer__sum-label {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--slate) 60%, transparent);
}

.mimi-drawer__sum-value {
	font-family: var(--font-display);
	font-size: 21px;
}

.mimi-drawer__note {
	margin: 8px 28px 0;
	font-size: 13px;
	line-height: 1.7;
	color: color-mix(in srgb, var(--slate) 50%, transparent);
}

.mimi-drawer__actions {
	padding: 18px 28px 26px;
	flex: none;
}

.mimi-drawer__btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 15px;
	background: var(--slate);
	color: var(--bone);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: opacity 150ms ease-out;
}

.mimi-drawer__btn:hover,
.mimi-drawer__btn:focus-visible {
	opacity: .86;
}

.mimi-drawer__go {
	display: block;
	margin-top: 14px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--slate) 60%, transparent);
	transition: color 150ms ease-out;
}

.mimi-drawer__go:hover,
.mimi-drawer__go:focus-visible {
	color: var(--slate);
}

.mimi-drawer__empty {
	padding: 34px 28px;
	flex: 1;
}

.mimi-drawer__empty-line {
	font-family: var(--font-display);
	font-size: 21px;
	line-height: 1.25;
	margin: 0;
}

.mimi-drawer__empty-body {
	font-size: 15px;
	line-height: 1.7;
	margin: 12px 0 22px;
	color: color-mix(in srgb, var(--slate) 64%, transparent);
}

/* The same link, in two places. Under the Checkout button it is centred,
   because the button above it is full width. Under the empty state's copy it is
   the only thing in a left-aligned block, and centring it there reads as a
   mistake rather than a choice. */
.mimi-drawer__empty .mimi-drawer__go {
	margin-top: 0;
	text-align: left;
}

/* Half a phone is not a cart. */
@media (max-width: 420px) {
	.mimi-drawer {
		width: 100vw;
	}
}