/**
 * Frontend styles.
 *
 * Every value a site owner can change under Downloads -> Settings -> Design is a CSS
 * custom property with a sensible default right here. The plugin then writes only the
 * properties that were actually changed into a small <style> block after this file, so a
 * default installation ships zero generated CSS and the file below is the whole story.
 *
 * Everything that can be inherited IS inherited: no font family, no text colour of its
 * own unless one was chosen. Borders and the muted meta line are derived from currentColor,
 * so the box sits correctly on a light and on a dark theme without asking the operating
 * system what it thinks -- a dark theme on a light OS used to get the wrong treatment.
 *
 * The download button renders as the theme's own button by default (it carries the class
 * the theme styles its buttons with). Only when the site owner picks "own style"
 * in the settings does the plugin paint it.
 */

.sududosu-download,
.sududosu-picker {
	/* Box. */
	--sududosu-border: rgba( 0, 0, 0, 0.12 );
	--sududosu-border-width: 1px;
	--sududosu-radius: 6px;
	--sududosu-bg: transparent;
	--sududosu-shadow: none;
	--sududosu-pad-y: 16px;
	--sududosu-pad-x: 20px;
	--sududosu-spacing: 24px;

	/* Text. */
	--sududosu-muted: rgba( 0, 0, 0, 0.6 );
	--sududosu-title-weight: 600;
	--sududosu-meta-size: 14px;

	/* Icon. */
	--sududosu-icon-size: 40px;

	/* Button. */
	--sududosu-accent: #2271b1;
	--sududosu-accent-ink: #fff;
	--sududosu-accent-hover: #135e96;
	--sududosu-btn-radius: 6px;
	--sududosu-btn-pad-y: 10px;
	--sududosu-btn-pad-x: 22px;
	--sududosu-btn-border-width: 0;
	--sududosu-btn-border-color: transparent;
	--sududosu-btn-weight: 500;
}

/*
 * Where color-mix() exists, the frame and the meta line follow the surrounding text colour
 * instead of guessing. Both are plain variable overrides, so an explicit colour chosen in
 * the settings still wins -- it is written after this file.
 */
@supports ( color: color-mix( in srgb, red 50%, transparent ) ) {
	.sududosu-download,
	.sududosu-picker {
		--sududosu-border: color-mix( in srgb, currentColor 20%, transparent );
		--sududosu-muted: color-mix( in srgb, currentColor 65%, transparent );
		--sududosu-accent-hover: color-mix( in srgb, var( --sududosu-accent ) 82%, #000 );
	}
}

.sududosu-download {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: var( --sududosu-pad-y ) var( --sududosu-pad-x );
	margin: var( --sududosu-spacing ) 0;
	background: var( --sududosu-bg );
	border: var( --sududosu-border-width ) solid var( --sududosu-border );
	border-radius: var( --sududosu-radius );
	box-shadow: var( --sududosu-shadow );
}

/* File type icon. */
.sududosu-download__icon {
	display: flex;
	flex: none;
	align-items: center;
}

.sududosu-download__icon svg {
	display: block;
	width: var( --sududosu-icon-size );
	height: auto;
}

/* display:flex above would otherwise defeat the hidden attribute. */
.sududosu-download__icon[hidden] {
	display: none;
}

/* Card: icon and text stacked, button full width. For grids and sidebars. */
.sududosu-download--card {
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.sududosu-download--card .sududosu-download__icon svg {
	width: calc( var( --sududosu-icon-size ) * 1.2 );
}

.sududosu-download--card .sududosu-download__info {
	flex: 1 1 auto;
	width: 100%;
}

.sududosu-download--card .sududosu-button,
.sududosu-download--card .sududosu-picker,
.sududosu-download--card .sududosu-password {
	width: 100%;
}

/* Compact: one tight line, smaller icon, no frame. For lists inside running text. */
.sududosu-download--compact {
	gap: 0.6em;
	padding: 0.4em 0;
	margin: calc( var( --sududosu-spacing ) / 3 ) 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.sududosu-download--compact .sududosu-download__icon svg {
	width: calc( var( --sududosu-icon-size ) * 0.6 );
}

/* Opt-in: the button takes the full width in every presentation, not just in the card. */
.sududosu-download--wide-button .sududosu-button {
	width: 100%;
}

.sududosu-download__info {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	min-width: 0;
	flex: 1 1 12em;
}

.sududosu-download__title {
	font-size: var( --sududosu-title-size, inherit );
	font-weight: var( --sududosu-title-weight );
	color: var( --sududosu-title-color, inherit );
	overflow-wrap: anywhere;
}

.sududosu-download__meta {
	font-size: var( --sududosu-meta-size );
	color: var( --sududosu-muted );
}

/*
 * Shared button basics. Deliberately no font size, line height or colour here: this rule
 * sits at the same specificity as a theme's own button rule and would win on load order,
 * so every such declaration would quietly override the theme it is meant to follow.
 */
.sududosu-button {
	display: inline-block;
	text-align: center;
	cursor: pointer;
}

/* Content areas of classic themes often underline every link, the button included. */
.sududosu-download .sududosu-button--theme,
.sududosu-files .sududosu-button--theme {
	text-decoration: none;
}

.sududosu-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sududosu-button[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/*
 * Theme button: no colours, no padding, no radius of our own -- the theme styles it through
 * the class it uses for its own buttons (.wp-element-button on block themes, .button and on
 * Divi .et_pb_button on classic ones), so it matches every other button on the site.
 * Own style: everything below comes from the design settings.
 */
.sududosu-button--plugin {
	line-height: 1.3;
	padding: var( --sududosu-btn-pad-y ) var( --sududosu-btn-pad-x );
	border: var( --sududosu-btn-border-width ) solid var( --sududosu-btn-border-color );
	border-radius: var( --sududosu-btn-radius );
	background: var( --sududosu-accent );
	color: var( --sududosu-accent-ink );
	font-size: var( --sududosu-btn-size, inherit );
	font-weight: var( --sududosu-btn-weight );
	text-decoration: none;
}

.sududosu-button--plugin:hover,
.sududosu-button--plugin:focus {
	background: var( --sududosu-accent-hover );
	color: var( --sududosu-accent-ink );
}

/*
 * Own style without a background colour: outlined in the text colour around the box, so the
 * button can never bring in a colour the site does not use. The outline is an inset shadow,
 * not a border, so the button keeps exactly the size of the filled one.
 */
.sududosu-button--neutral,
.sududosu-button--neutral:hover,
.sududosu-button--neutral:focus {
	color: inherit;
	box-shadow: inset 0 0 0 2px currentColor;
}

.sududosu-button--neutral {
	background: transparent;
}

.sududosu-button--neutral:hover,
.sududosu-button--neutral:focus {
	background: rgba( 0, 0, 0, 0.06 );
}

@supports ( color: color-mix( in srgb, red 50%, transparent ) ) {
	.sududosu-button--neutral:hover,
	.sududosu-button--neutral:focus {
		background: color-mix( in srgb, currentColor 12%, transparent );
	}
}

.sududosu-notice {
	flex: 1 1 100%;
	padding: 0.75em 1em;
	border-radius: var( --sududosu-radius );
	background: rgba( 0, 0, 0, 0.05 );
	font-size: 0.9375em;
}

@supports ( color: color-mix( in srgb, red 50%, transparent ) ) {
	.sududosu-notice {
		background: color-mix( in srgb, currentColor 7%, transparent );
	}
}

.sududosu-notice--error {
	background: rgba( 214, 54, 56, 0.12 );
}

.sududosu-notice__link {
	white-space: nowrap;
}

.sududosu-password {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5em;
	flex: 1 1 100%;
}

.sududosu-password__label {
	flex: 1 1 100%;
	font-size: var( --sududosu-meta-size );
	color: var( --sududosu-muted );
}

.sududosu-password__input {
	flex: 1 1 12em;
	min-width: 0;
	padding: 0.55em 0.75em;
	border: 1px solid var( --sududosu-border );
	border-radius: var( --sududosu-radius );
	font: inherit;
	color: inherit;
	background: transparent;
}

.sududosu-list .sududosu-download {
	margin: 0 0 calc( var( --sududosu-spacing ) / 3 );
}

/* Dropdown picker: one select plus one button, for a set of files that belong together. */
.sududosu-picker {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin: var( --sududosu-spacing ) 0;
}

/* Inside a download box the picker is the button's replacement, not a block of its own. */
.sududosu-download .sududosu-picker {
	margin: 0;
}

.sududosu-picker__label {
	font-weight: var( --sududosu-title-weight );
}

.sududosu-picker__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5em;
}

.sududosu-picker__select {
	flex: 1 1 16em;
	min-width: 0;
	max-width: 100%;
	padding: 0.55em 0.75em;
	border: 1px solid var( --sududosu-border );
	border-radius: var( --sududosu-radius );
	font: inherit;
	color: inherit;
	background-color: transparent;
}