/*
 * What the investor sections that list documents share: a row — a title, and
 * a press for each file the document comes in.
 *
 * Read from cp-all-designer investor/financial-info/financial-statements/ and
 * css/investor.css:789-801 (.invacc__row), 944-965 (.dlbtn) and 966-1011 (the
 * steps down).
 *
 * Each part carries an attribute this file reads and the widget's own class,
 * which its Style controls write to. A press changes its colours when it is
 * reached, so the controls name each state's own colour on the section and
 * the rules below say which is showing.
 */

[data-custom-investor-band] {
	--custom-rows-press-ink: #16418C;
	--custom-rows-press-ground: #FFFFFF;
	--custom-rows-press-edge: rgba(22, 65, 140, 0.18);
	--custom-rows-press-lit-ink: #FFFFFF;
	--custom-rows-press-lit: #16418C;
}

/* ------------------------------------------------------------------ */
/* A row — investor.css:789-801                                        */
/* ------------------------------------------------------------------ */

[data-custom-investor-band] [data-custom-investor-rows] {
	margin: 0;
	padding: 0;
	list-style: none;
}

[data-custom-investor-band] [data-custom-investor-row] {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	gap: 16px;
	margin: 0;
	list-style: none;
}

[data-custom-investor-band] [data-custom-investor-row-title] {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
}

[data-custom-investor-band] [data-custom-investor-files] {
	flex: 0 0 auto;
	display: flex;
}

/* ------------------------------------------------------------------ */
/* A press — investor.css:944-965                                      */
/* ------------------------------------------------------------------ */

[data-custom-investor-band] [data-custom-investor-file] {
	--custom-press-ink: var(--custom-rows-press-ink);
	--custom-press-ground: var(--custom-rows-press-ground);
	--custom-press-edge: var(--custom-rows-press-edge);
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	gap: 8px;
	padding: 0 20px 0 16px;
	border-width: 2px;                     /* investor.css:947 measures 1px */
	border-style: solid;
	border-radius: 1000px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	transition: background-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-custom-investor-band] [data-custom-investor-file]:focus-visible {
	--custom-press-ink: var(--custom-rows-press-lit-ink);
	--custom-press-ground: var(--custom-rows-press-lit);
	--custom-press-edge: var(--custom-rows-press-lit);
	outline: 4px solid #50A3D5;            /* investor.css:959 measures 3px */
	outline-offset: 2px;
}

@media (hover: hover) {
	[data-custom-investor-band] [data-custom-investor-file]:hover {
		--custom-press-ink: var(--custom-rows-press-lit-ink);
		--custom-press-ground: var(--custom-rows-press-lit);
		--custom-press-edge: var(--custom-rows-press-lit);
	}
}

/* investor.css:961-964 */
[data-custom-investor-band] [data-custom-investor-file-mark] {
	flex: 0 0 auto;
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* investor.css:965 — the short form stands in once the words no longer fit */
[data-custom-investor-band] [data-custom-investor-file-short] {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (investor.css:966-976)                         */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	/* The title takes the line, and the presses share the next. */
	[data-custom-investor-band] [data-custom-investor-row] {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	[data-custom-investor-band] [data-custom-investor-files] {
		width: 100%;
	}
	[data-custom-investor-band] [data-custom-investor-file] {
		flex: 1 1 0;
		justify-content: center;
		padding: 0 14px;
	}
}

/* investor.css:1007-1011 — the narrowest phones: the words give way to their short form */
@media (max-width: 340px) {
	[data-custom-investor-band] [data-custom-investor-file] {
		padding: 0 12px;
	}
	[data-custom-investor-band] [data-custom-investor-file-label]:not(:only-of-type) {
		display: none;
	}
	[data-custom-investor-band] [data-custom-investor-file-short] {
		display: inline;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-custom-investor-band] [data-custom-investor-file] {
		transition: none;
	}
}