/**
 * woocommerce/mini-cart block styles.
 *
 * Hand-written plain CSS -- the same shape as cart.css and checkout.css beside
 * it: no SCSS source, no build step. The file is enqueued as-is for the
 * mini-cart block from the $block_styles map in functions.php, so edit it
 * directly and do not add it to the `sass` task in gruntfile.js. Values come
 * from theme.json presets (`var(--wp--preset--color--...)`) and literal pixels,
 * so it stands on its own without style.css.
 *
 * WooCommerce ships the rules this file argues with in
 * assets/client/blocks/mini-cart.css (drawer chrome, panel frame) and
 * mini-cart-contents.css (the items table, the drawer close button). Their
 * deepest frontend selectors reach four classes plus an element -- e.g.
 * `.is-mobile table.wc-block-cart-items .wc-block-cart-items__row
 * .wc-block-cart-item__image` -- and load order between two block stylesheets
 * is not guaranteed. So every override is rooted one class deeper than its core
 * counterpart: panel chrome at `.wp-block-woocommerce-mini-cart-contents` (or
 * `.wc-block-mini-cart__template-part` for the drawer close button, which is a
 * sibling of the panel, not inside it), and the items table at that plus
 * `table.wc-block-cart-items.wc-block-mini-cart-items`. Keep those roots when
 * adding rules; that is what lands each rule above core on specificity alone,
 * and it is what let the `!important` on the thumbnail width, on the subtotal
 * description and on the footer button label be dropped in the move out of
 * assets/scss/woocommerce/_mini-cart.scss.
 *
 * Four `!important` declarations remain, each forced by an `!important` it has
 * to answer and each commented where it sits: three on the close button, which
 * core paints that way, and one on the line price, which the theme's own
 * _product-item.scss does. Add no others.
 *
 * Nothing here runs through grunt's rtlcss task -- that only mirrors style.css,
 * editor-style.css and elementor.css -- so anything side-specific is written as
 * a logical property (`margin-inline-end`, not `margin-right`) and mirrors on
 * its own under `dir="rtl"`.
 *
 * Rules that were in _mini-cart.scss but are not about the mini cart -- the
 * quantity selector, the sale badge and the remove link, all of which the cart
 * and checkout blocks show too -- did not come here. They stayed global, in
 * assets/scss/woocommerce/_wc-blocks.scss.
 *
 * Sections:
 *   1. Panel frame
 *   2. Panel: title and close
 *   3. Panel: items list
 *   4. Panel: one item
 *   5. Panel: footer
 */

/* --------------------------------------------------------------------------
 * 1. Panel frame
 *
 * Core runs the panel edge to edge (`padding: 0`) and lets the title, the list
 * and the footer each carry their own 16px gutter. The design has one 30px
 * gutter for all three instead, so it goes on the panel and each of those three
 * gives its own back below.
 * ----------------------------------------------------------------------- */

.wc-block-mini-cart__drawer.wc-block-components-drawer .wp-block-woocommerce-mini-cart-contents {
	margin: 0 30px;
	padding: 20px 0 0;
}

/* --------------------------------------------------------------------------
 * 2. Panel: title and close
 *
 * The close button is not inside .wp-block-woocommerce-mini-cart-contents --
 * core renders it as a sibling within .wc-block-mini-cart__template-part -- so
 * it is the one part of the panel rooted there instead.
 * ----------------------------------------------------------------------- */

.wp-block-woocommerce-mini-cart-contents h2.wc-block-mini-cart__title {
	margin: 0;
	padding-bottom: 10px;
	font-size: 26px;
}

.wp-block-woocommerce-mini-cart-contents h2.wc-block-mini-cart__title .wp-block-woocommerce-mini-cart-title-items-counter-block {
	font-size: 14px;
}

/*
 * The close button is centred on the title's own line rather than parked in the
 * panel's top corner, so the two read as one header row.
 *
 * `margin: 0` is what makes that arithmetic possible. Core offsets the button
 * with `margin: -1em`, an em of a font size the button inherits, so its painted
 * position moved with the panel's type; zeroing it means `top` is the position.
 * The title's line box then starts 36px down -- 20px of panel padding above it,
 * plus the 16px top margin core puts on the notices slot that precedes it --
 * and runs 31px tall, so a 30px button set half a pixel inside that shares its
 * centre line.
 *
 * `right: 0` is measured from the panel, not the drawer: core makes
 * .wp-block-woocommerce-mini-cart-contents the positioned ancestor, and the
 * panel is already inset by its own 30px gutter. Zero puts the button's right
 * edge on that gutter, level with the end of the title's line.
 */
.wc-block-mini-cart__template-part .wc-block-components-button.wc-block-components-drawer__close {
	top: 37px;
	right: 0;
	display: flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	margin: 0;
	border-width: 0;
	border-radius: 50px;
	opacity: 1;

	/*
	 * Core paints this button with `background: transparent !important`,
	 * `color: inherit !important` and `padding: 1em !important`, so these three
	 * are the only declarations in the file that cannot win on specificity.
	 */

	/* stylelint-disable declaration-no-important -- core's own !important. */
	padding: 0 !important;
	background-color: var(--wp--preset--color--danger-2) !important;
	color: var(--wp--preset--color--base) !important;

	/* stylelint-enable declaration-no-important */
}

.wc-block-mini-cart__template-part .wc-block-components-button.wc-block-components-drawer__close svg {
	width: 16px;
	height: 16px;
}

/* --------------------------------------------------------------------------
 * 3. Panel: items list
 *
 * The scroll container gives back the panel's 30px gutter so its scrollbar sits
 * against the panel edge, and the bar itself is drawn as a 2px hairline rather
 * than the platform default.
 * ----------------------------------------------------------------------- */

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__items {
	padding: 0;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__items::-webkit-scrollbar {
	width: 2px;
	height: 2px;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__items::-webkit-scrollbar-thumb {
	background-color: var(--wp--preset--color--contrast-2);
}

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__items::-webkit-scrollbar-track {
	background-color: var(--wp--preset--color--gray-1100);
}

/* --------------------------------------------------------------------------
 * 4. Panel: one item
 *
 * Core lays the row out as a two-column grid (image, then everything else) and
 * already nests the quantity selector and the remove control inside the product
 * cell, so the design's shape needs only the row's own padding and rule, a
 * smaller thumbnail, and the two price cells aligned to the row's right edge.
 *
 * The drawer is always one of core's three narrow breakpoints -- .is-small,
 * .is-medium or .is-mobile -- and core states the row padding once per class,
 * so the override has to as well.
 * ----------------------------------------------------------------------- */

.wc-block-mini-cart__drawer.is-medium table.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-mini-cart__drawer.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-mini-cart__drawer.is-small table.wc-block-cart-items .wc-block-cart-items__row {
	padding: 20px 0;
}

.wp-block-woocommerce-mini-cart-contents table.wc-block-cart-items.wc-block-mini-cart-items {

	/*
	 * Core draws no rule between mini-cart rows -- its own row border excludes
	 * .wc-block-mini-cart-items -- and hangs a `:last-child:after` off the last
	 * one, so the separator is the theme's to add and :not(:last-child) is what
	 * keeps it off the bottom of the list.
	 */
	tbody .wc-block-cart-items__row:not(:last-child) {
		border-bottom: 1px solid var(--wp--preset--color--gray-1100);
	}

	.wc-block-cart-items__row .wc-block-cart-item__image a {
		display: block;
	}

	.wc-block-cart-items__row .wc-block-cart-item__image img {
		width: 60px;
		border-radius: 8px;
	}

	/*
	 * One rhythm down the product cell. Core stacks the name, the prices, the
	 * description and the quantity row in a flex column on a 4px gap, but the
	 * price element carries a bottom margin of its own, so the gap under the
	 * price came out at 28px and the stack read as two groups rather than four
	 * lines. The margin goes and the gap carries the spacing on its own.
	 */
	.wc-block-cart-items__row .wc-block-cart-item__wrap {
		gap: 10px;
	}

	/*
	 * The line price reads at the product name's size, which resolves to the
	 * `small` preset -- naming the preset keeps the two tied together if either
	 * moves.
	 *
	 * The margin it is losing is the theme's own, not core's:
	 * assets/scss/woocommerce/_product-item.scss gives every `.price` on the
	 * site `margin-bottom: 15px !important`, and 24px !important from 1024px up.
	 * That rule is unscoped and several surfaces lean on it, so it is answered
	 * here rather than unpicked there -- which takes an !important, since no
	 * amount of specificity beats one.
	 */
	.wc-block-cart-item__prices .wc-block-components-product-price {
		justify-content: flex-end;
		padding: 0;
		font-size: var(--wp--preset--font-size--small, 14px);
		font-weight: 600;

		/* stylelint-disable-next-line declaration-no-important -- see above. */
		margin-bottom: 0 !important;
	}

	/* Struck-through original, a step down so the sale price still leads. */
	.wc-block-cart-item__prices .wc-block-components-product-price del {
		font-size: 12px;
		font-weight: 400;
	}

	.wc-block-cart-item__total .wc-block-components-product-price {
		justify-content: flex-end;
		margin-inline-end: 10px;
		padding: 0 14px;
		font-size: var(--wp--preset--font-size--small, 14px);
	}

	.wc-block-components-product-badge {
		margin-inline-end: 20px;
	}

	/*
	 * The stepper is the cart page's, restated. cart.css draws it inside
	 * `.wp-block-woocommerce-cart .wc-block-cart`, so none of it reaches the
	 * drawer; these are the same declarations against the same tokens, and the
	 * two should be changed together.
	 *
	 * The glyphs are masks rather than background images so the button's own
	 * `color` paints them, which keeps the glyph on one token instead of a
	 * colour baked into a data URI.
	 */
	.wc-block-components-quantity-selector {
		display: flex;
		align-items: center;
		padding: 4px;
		border-color: var(--wp--preset--color--gray-1100);
		border-radius: 60px;
	}

	.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
		min-width: 37px;
		padding: 0;
		border-width: 0;
		border-radius: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
	}

	/*
	 * `flex-shrink: 0` is what makes the 28px stick. The number input beside
	 * them is `flex: 1 1 auto` with no width of its own, so its flex basis is a
	 * number field's intrinsic ~150px -- far more than the pill holds. Left to
	 * shrink with it the discs come out oval.
	 */
	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
		width: 28px;
		height: 28px;
		flex-shrink: 0;
		min-width: 0;
		padding: 0;
		border-width: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--base-3);
		color: var(--wp--preset--color--gray-100);
		font-size: 0;
		opacity: 1;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button::before {
		content: "";
		display: block;
		margin: auto;
		background-color: currentcolor;
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
	}

	/*
	 * The two glyphs are the same SVGs cart.css uses, but percent-encoded --
	 * `%20` for the spaces, `%27` for the attribute quotes -- so the `url()`
	 * needs no quotes of its own. stylelint's function-url-quotes wants it that
	 * way, and cart.css's copies are only still quoted because they predate the
	 * rule being enforced there.
	 */
	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--plus::before {
		width: 7px;
		height: 7px;
		mask-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%277%27%20height=%277%27%20viewBox=%270%200%207%207%27%3E%3Cpath%20d=%27M0%203.795V2.73H2.865V0H3.99V2.73H6.855V3.795H3.99V6.54H2.865V3.795H0Z%27/%3E%3C/svg%3E);
	}

	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--minus::before {
		width: 6px;
		height: 2px;
		mask-image: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%276%27%20height=%272%27%20viewBox=%270%200%206%202%27%3E%3Cpath%20d=%27M0%201.065V0H5.94V1.065H0Z%27/%3E%3C/svg%3E);
	}

	/*
	 * The minus at a quantity of one cannot be pressed, and core's resting state
	 * for it -- opacity .6 -- is a casualty of the full-opacity disc above.
	 * This puts one back.
	 */
	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
		opacity: 0.5;
		cursor: default;
	}

	/*
	 * Core's hover -- opacity .6 back up to 1 -- is cancelled by that same disc.
	 * This puts a visible one back by deepening the disc rather than recolouring
	 * it: the accent is the page's call-to-action colour, and a stepper is not
	 * one. gray-1100 is the step because it is the line colour of the pill the
	 * discs sit in, so the hovered disc reads as part of the control, and it
	 * leaves the glyph legible at its resting colour.
	 *
	 * `:not(:disabled)` keeps it off the button the rule above dimmed.
	 */
	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled),
	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible:not(:disabled) {
		background: var(--wp--preset--color--gray-1100);
	}
}

/*
 * The variation and description lines under the product name. The description
 * arrives as a rendered block, so it brings the editor's own global padding
 * with it -- inside a 30px panel gutter that reads as a double indent.
 */
.wc-block-mini-cart__template-part .wc-block-components-product-metadata__description .has-global-padding {
	padding: 0;
}

/*
 * The description runs to whatever the excerpt holds, which in a 400px panel is
 * four or five lines that push the quantity row out of the card. Two lines is
 * the budget, and the leading is opened up so the pair reads as a paragraph
 * rather than a stack. `-webkit-box` is the only line clamp with the support to
 * rely on; the theme already uses it for product excerpts in _wc-blocks.scss.
 */
.wc-block-mini-cart__template-part .wc-block-components-product-metadata .wc-block-components-product-metadata__description p {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 12px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
 * 5. Panel: footer
 * ----------------------------------------------------------------------- */

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer {
	padding: 16px 0;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--gray-1100);
}

/* "Shipping, taxes, and discounts calculated at checkout." */
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
	font-size: 10px;
	letter-spacing: 0.1px;
}

/* Core stacks the two buttons, so the column gap shows only side by side. */
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions {
	column-gap: 27px;
	row-gap: 14px;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer .wp-element-button {
	gap: 10px;
	padding: 12px;
	border-radius: 50px;
	line-height: 1.572;
	color: var(--wp--preset--color--base);
	transition: 0.3s ease-in-out;
}

.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer .wp-element-button::after {
	content: "\F138";

	/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword --
	   an icon font has no generic to fall back to. */
	font-family: bootstrap-icons;
}

/*
 * View cart -- outlined, against the filled checkout button beside it.
 *
 * `color` is restated here, and it is not decoration. Core paints outlined
 * buttons with `.wc-block-components-button:not(.is-link).is-style-outline {
 * color: currentColor }` -- three classes, the same weight as the rule above --
 * so whichever stylesheet loads last wins the tie, and this one does. Without
 * this line the rule above would hand the outlined button the filled button's
 * white, on the white panel. `currentColor` is core's own value, so the button
 * keeps taking its ink from the panel rather than pinning a literal here.
 */
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart,
.wp-block-woocommerce-mini-cart-contents .wc-block-mini-cart__footer .wc-block-components-button:not(.is-link).outlined {
	border: 1px solid var(--wp--preset--color--contrast-2);
	box-shadow: none;
	color: currentcolor;
}