@charset "UTF-8";

/**
 * buttons.css 1.0.0
 * Author: hybrid.
 *
 * Button styles — nav.buttons, .button, button, input[type=submit].
 * Nav-specific styles defined in navigations.css.
 * Form submit styles shared with forms.css via --button-* tokens.
 *
 * Sections
 * CONFIG     — button tokens, size variants, context overrides
 * ANIMATIONS — a/button transitions
 * CORE       — base styles, states, variants, containers
 * THEME      — project-specific overrides
 *
 * Tokens
 * --button-text-color
 * --button-background-color
 * --button-hover-text-color
 * --button-hover-background-color
 * --button-border
 * --button-border-color
 * --button-hover-border-color
 * --button-text-transform
 * --button-letter-spacing
 * --button-font-size
 * --button-font-weight
 * --button-padding
 * --button-radius
 * --button-transform
 * --button-hover-transform
 *
 * Dependencies
 * --font-size          defined in fonts.css
 * --font-weight-bold   defined in fonts.css
 * --stroke-width       defined in structure.css
 * --content-spacing    defined in spacing.css
 * --dark-color         defined in colors.css
 * --bright-color       defined in colors.css
 * --text-color         defined in colors.css
 * --background-color   defined in colors.css
 * --nav-gap            defined in navigations.css
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


/* ============================== DEFAULT ============================== */

:root {
	--button-text-color: var(--dark-color);
	--button-background-color: var(--bright-color);
	--button-hover-text-color: var(--bright-color);
	--button-hover-background-color: var(--dark-color);

	--button-border: solid var(--stroke-width);
	--button-border-color: var(--dark-color);
	--button-hover-border-color: var(--dark-color);

	--button-text-transform: uppercase;
	--button-letter-spacing: 0;
	--button-font-size: calc(var(--font-size) * .75);
	--button-small-font-size: calc(var(--font-size) * .625);
	--button-large-font-size: calc(var(--font-size) * 1);
	--button-font-weight: var(--font-weight-bold);
	--button-padding: 1em 1.5em;

	--button-radius: calc(var(--button-font-size) * 4);
	--button-transform: unset;
}


/* ============================== IS-THEME ============================== */

[class^="is-theme-"] {
	--button-background-color: var(--bright-color);
	--button-hover-text-color: var(--text-color);
	--button-hover-background-color: var(--background-color);
	--button-hover-border-color: var(--background-color);
}
[class^="is-theme-"] nav.buttons a.alt,
[class^="is-theme-"] .button.alt {
	--button-text-color: var(--bright-color);
	--button-background-color: var(--dark-color);
	--button-hover-text-color: var(--text-color);
	--button-hover-background-color: var(--background-color);
	--button-hover-border-color: var(--background-color);
}


/* ============================== FILTERS ============================== */

.filters {
	--button-hover-transform: unset;
}



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


/* ============================== BUTTONS ============================== */

/**
 * nav.buttons — button group wrapper
 * a.button    — anchor styled as button
 * button      — form button
 * input[type=submit] — form submit
 */


/* =============== DEFAULT =============== */

nav.buttons a,
.button,
button,
input[type=submit] {
	position: relative;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nav-gap);
	font-size: var(--button-font-size);
	line-height: 1;
	font-weight: var(--button-font-weight);
	letter-spacing: var(--button-letter-spacing);
	text-transform: var(--button-text-transform);
	text-decoration: none;
	white-space: balance; /*nowrap;*/
	width: auto;
	padding: var(--button-padding);
	color: var(--button-text-color);
	border: var(--button-border);
	border-color: var(--button-border-color);
	border-radius: var(--button-radius);
	background: none;
}
nav.buttons a.active,
.button.active,
button.active {
	color: var(--button-hover-text-color);
	border-color: var(--button-hover-border-color);
}
nav.buttons a *,
.button *,
button *,
input[type=submit] * {
	margin: 0;
}
nav.buttons a::after,
.button::after,
button::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	height: 100%;
	background: var(--button-background-color);
	transform-origin: center;
	border-radius: var(--button-radius);
	pointer-events: none;
}
input[type=submit] {
	background: var(--button-background-color);
}
nav.buttons * + * {
	margin-top: 0;
}


/* =============== HOVER =============== */

@media (hover: hover) {
	nav.buttons a.active,
	.button.active,
	button.active,
	nav.buttons a:hover,
	.button:hover,
	button:hover {
		color: var(--button-hover-text-color);
		border-color: var(--button-hover-border-color);
	}
	input[type=submit]:hover,
	nav.buttons a.active::after,
	.button.active::after,
	button.active::after,
	nav.buttons a:hover::after,
	.button:hover::after,
	button:hover::after {
		background: var(--button-hover-background-color);
		transform: var(--button-hover-transform);
		transform-origin: center;
	}
}
@media (hover: none) {
	nav.buttons a:active,
	.button:active,
	button:active,
	nav.buttons a.hover,
	.button.hover,
	button.hover {
		color: var(--button-hover-text-color);
		border-color: var(--button-hover-border-color);
	}
	input[type=submit].hover,
	nav.buttons a.active::after,
	.button.active::after,
	button.active::after,
	nav.buttons a.hover::after,
	.button.hover::after,
	button.hover::after {
		background: var(--button-hover-background-color);
		transform: var(--button-hover-transform);
		transform-origin: center;
	}
}


/* =============== ICONS =============== */

[class^="icon-"].button {
	aspect-ratio: 1/1;
	height: auto;
}


/* =============== IN CONTENT =============== */

h1 .button,
h2 .button,
h3 .button,
h4 .button,
h5 .button,
h6 .button,
p .button {
	margin-top: 0;
}


/* =============== CONTAINER =============== */

nav.buttons-container {
	gap: var(--content-spacing);
}
nav.buttons-container > nav.buttons {
	width: 100%;
	margin: 0;
}


/* =============== LARGE =============== */

.buttons.large,
.button.large,
button.large {
	font-size: var(--button-large-font-size);
}


/* =============== SMALL =============== */

.buttons.small,
.button.small,
button.small {
	font-size: var(--button-small-font-size);
}


/* =============== CENTERED =============== */
/*
nav.buttons.centered {
	width: 100%;
	justify-content: center;
}
.button.centered {
	margin-left: auto;
	margin-right: auto;
}*/

/* =============== ALIGNMENT =============== */

.buttons.is-center {
	justify-content: center;
}
.buttons.is-right {
	justify-content: flex-end;
}
.buttons.is-justify {
	justify-content: space-between;
}
.buttons.is-stretch {
	flex-wrap: nowrap;
}
.buttons.is-stretch > * {
	flex: 1 1 0;
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for project-specific overrides */



/* =============== DOWNLOAD =============== */

nav.buttons.download a,
.button.download {
	border: 0;
	padding: 0;
	position: relative;
	gap: .5em;
}
nav.buttons.download::before,
.button.download::before {
	content: "⮑";
}
nav.buttons.download a::after,
.button.download::after {
	display: none;
}
nav.buttons.download a span,
.button.download span {
	text-shadow: none;
	text-decoration-line: underline;
	text-decoration-thickness: calc(var(--line-height) / 2);
	text-underline-position: from-font;
	text-underline-offset: var(--line-height);
}
nav.buttons.download a:hover,
.button.download:hover {
	color: inherit;
	background: none;
}


/* ============================== FILTERS COUNT ============================== */

[data-filters-count]::before {
	content: attr(data-filters-count);
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .75em;
	line-height: 1;
	text-align: center;
	height: 2em;
	aspect-ratio: 1/1;
	margin: -.5em;
	border-radius: 50%;
	color: inherit;
	background: var(--button-background-color);
	border: inherit;
	pointer-events: none;
}
[data-filters-count]:hover::before {
	background: var(--button-hover-background-color);
}
[data-filters-count="0"]::before {
	opacity: 0;
}