/*
 * The size guide link on a product page.
 *
 * The original was a 24x10 ruler and the words "Size Guide" in green. Green is
 * now the sale colour elsewhere in this plugin, and a green link beside a red
 * sale price reads as a second status rather than as something to click, so this
 * takes the body colour with an underline.
 */

.pearlory-sizeguide {
	margin: 0 0 12px;
}

.pearlory-sizeguide__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #4a4a4a;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(0, 0, 0, 0.28);
}

.pearlory-sizeguide__link:hover,
.pearlory-sizeguide__link:focus-visible {
	color: #161616;
	text-decoration-color: #161616;
}

/*
 * The icon takes currentColor from the link, so it darkens on hover with the
 * text. flex-shrink: 0 because the ruler is wider than it is tall and would
 * otherwise be the first thing squeezed on a narrow column.
 */
.pearlory-sizeguide__icon {
	flex: 0 0 auto;
	display: block;
}