/* ========================================
   Icons

   One shared arrow, for anywhere the site needs to point somewhere: inside a
   button (bc-button.css's .btn--icon), inside a text link, or standing alone
   as a decorative badge. Three separate techniques used to do this job on two
   different files -- one stroked, one solid -- and none of them agreed with
   each other: .front-icon--arrow (front-page-2.css), .bc-atc__continue-icon
   (bc-add-to-cart-drawer.css) and .btn__icon (bc-button.css). All three are
   gone; this is the one that replaces them.

   Single-colour SVG masked so it takes the current text colour, the same
   technique the theme already used for this and other icons -- see
   front-page-2.css's .front-icon for the non-arrow ones (leaf, heart,
   check-circle), which stay separate since they are not directional and
   never joined this one.

   The nav dropdown's chevron (.menu-item__chevron, header.css) is a distinct,
   filled caret shape from a different SVG and was deliberately left out: it
   is a disclosure indicator, not a "go here" arrow, and swapping its shape
   would visibly change the main navigation.

   .icon-download (arrow into a tray) is the second icon on the same
   technique, drawn to the arrow's own stroke and caps so the two read as a
   set. It is not a direction, so it is its own class rather than an
   .icon-arrow modifier; the shared declarations are listed once below.
======================================== */

.icon-arrow,
.icon-download {
	display: inline-block;
	flex: 0 0 20px;

	/*
	 * One fixed size everywhere for now: was 1em (scaling with whatever text
	 * it sat next to) until that read as too small across the board. 20px is
	 * deliberately uniform rather than tuned per context -- a smaller step for
	 * .btn--mid / .btn--small, or for narrow viewports, is a decision to make
	 * once this size has been seen in place, not before.
	 */
	inline-size: 20px;
	block-size: 20px;

	background-color: currentColor;
	pointer-events: none;

	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
}

.icon-arrow {
	mask-image: url(../../../images/icons/icon-arrow.svg);
	-webkit-mask-image: url(../../../images/icons/icon-arrow.svg);
}

.icon-download {
	mask-image: url(../../../images/icons/icon-download.svg);
	-webkit-mask-image: url(../../../images/icons/icon-download.svg);
}

/*
 * Direction. A rotation on the one shape rather than four redrawn SVGs;
 * --right matches the SVG's own orientation, which is why a plain .icon-arrow
 * with no direction modifier already points right.
 */
.icon-arrow--down {
	transform: rotate(90deg);
}

.icon-arrow--left {
	transform: rotate(180deg);
}

.icon-arrow--up {
	transform: rotate(-90deg);
}