/*
 * Download Button block: front end and editor.
 *
 * Selectors start with the block's wrapper class so they win over the theme's
 * link styles (Hueman underlines links inside posts).
 */

.wp-block-thesatellite-download-button {
	margin: 1.5em 0;
}

.wp-block-thesatellite-download-button.has-text-align-left {
	text-align: left;
}

.wp-block-thesatellite-download-button.has-text-align-center {
	text-align: center;
}

.wp-block-thesatellite-download-button.has-text-align-right {
	text-align: right;
}

/* The button. Custom colors from the editor arrive as these two variables. */
.wp-block-thesatellite-download-button .thesatellite-download-button__link {
	--thesatellite-download-bg: #1b75bb;
	--thesatellite-download-color: #fff;

	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.75em 1.5em;
	border: 0;
	border-radius: 6px;
	background-color: var(--thesatellite-download-bg);
	color: var(--thesatellite-download-color);
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.15s ease;
}

.wp-block-thesatellite-download-button .thesatellite-download-button__link:hover,
.wp-block-thesatellite-download-button .thesatellite-download-button__link:focus,
.wp-block-thesatellite-download-button .thesatellite-download-button__link:visited {
	color: var(--thesatellite-download-color);
	text-decoration: none;
}

/* Darken on hover with an overlay, so it works with any custom color. */
.wp-block-thesatellite-download-button .thesatellite-download-button__link:hover {
	box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.15);
}

.wp-block-thesatellite-download-button .thesatellite-download-button__link:focus-visible {
	outline: 2px solid var(--thesatellite-download-bg);
	outline-offset: 2px;
}

.wp-block-thesatellite-download-button .thesatellite-download-button__icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
}

.wp-block-thesatellite-download-button .thesatellite-download-button__label {
	overflow-wrap: anywhere;
}

/* File name and size under the button. */
.wp-block-thesatellite-download-button .thesatellite-download-button__meta {
	display: block;
	margin-top: 0.5em;
	font-size: 0.85em;
	opacity: 0.8;
	overflow-wrap: anywhere;
}

.wp-block-thesatellite-download-button .thesatellite-download-button__name + .thesatellite-download-button__size::before {
	content: "·";
	content: "·" / "";
	margin: 0 0.4em;
}

/* Read by screen readers only. */
.wp-block-thesatellite-download-button .thesatellite-download-button__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}