:root {
	--wa-color-neutral: var(--wa-color-gray-95);

	--color-brand: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
	--color-error: var(--wa-color-danger-50);
	--color-delete: var(--wa-color-danger-30);
	/* --color-bg: #F1EFE9; Sepia */
	--collr-bg: #F6F5F4;
	--color-bg-dark: #e3dfd3;

	--color-button-hover: #E8E6E3;
	--color-button-active: #CFCAC4;
	--color-button-background: linear-gradient(to bottom, #f6f5f4, #edebe9) var(--color-button-hover);
	--color-button-border: #bfb8b1;

	--color-button-primary-hover: color-mix(in oklab, hsl(211.27deg 100% 46.27%), var(--wa-color-mix-hover));
	--color-button-primary-active: color-mix(in oklab, hsl(211.27deg 100% 46.27%), var(--wa-color-mix-active));
	--color-button-primary-border: #1B6ACB;
	/* --color-button-primary-background: linear-gradient(to bottom, #0071ec, #005bc3); */
	--color-button-primary-background: linear-gradient(to bottom, hsl(211.27deg 100% 51%), hsl(211.27deg 100% 42%)) hsl(211.27deg 100% 46.27%);
/* */

	

	/***
	 * Other customisations
	 */
	--wa-content-spacing: var(--wa-space-m);
}

/* #region Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~ */
.button {
	/* Create the base for anchor buttons looking like real ones */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	user-select: none;
	white-space: nowrap;
	vertical-align: middle;
	transition-property: background, border, box-shadow, color;
	transition-duration: var(--wa-transition-fast);
	transition-timing-function: var(--wa-transition-easing);
	cursor: pointer;
	padding: 0 var(--wa-form-control-padding-inline);
	font-family: inherit;
	font-size: inherit;
	font-weight: var(--wa-font-weight-action);
	line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
	height: var(--wa-form-control-height);
	border-style: var(--wa-border-style);
	border-width: var(--wa-border-width-s);
}

button,
.button,
input:where([type='button'], [type='reset'], [type='submit'], [type='file']) {
	
	/* Add space between items (text and icons) */
	display: inline-flex;
	gap: var(--wa-space-xs);

	/* Extra button sizes */
	&[size='small'] { font-size: var(--wa-font-size-s); }
	&[size='large'] { font-size: var(--wa-font-size-l); }

	/* Default styles for standard buttons */
	:where(&:not(input[type='file'])) {
		color: var(--wa-color-text);
		border-color: var(--color-button-border);
		/* We want a background image here but need to set the background color as well otherwise there's a little flash of color from the button's container's background */
		background: var(--color-button-background);

		&:not(:disabled) {
			&:hover,
			&:hover.pressed {
				background: var(--color-button-hover);
			}

			&:active,
			&.pressed {
				background: var(--color-button-active);
			}
		}
	}

	/* Default styles for file selector buttons */
	:where(&:is(input[type='file'])) {
	&::file-selector-button {
		color: var(--wa-color-text);
		border-color: var(--color-button-border);
		background: var(--color-button-background);

		&:hover,
		&:hover.pressed {
			background: var(--color-button-hover);
		}

		&:active,
		&.pressed {
			background: var(--color-button-active);
		}
	}

	&:not(:disabled) {
		&::file-selector-button:hover {
			background: var(--color-button-hover);
		}

		&::file-selector-button:active {
			background: var(--color-button-active);
		}
	}
	}

	/* Modifier classes */
	&.primary {
		/* My primary skeumorphic button class */

		/* border-color: transparent; */
		color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
		border-color: var(--color-button-primary-border);
		background: var(--color-button-primary-background);

		&:not(input[type='file']),
		&::file-selector-button {
			&:not(:disabled) {
				&:hover,
				&:hover.pressed {
					background: var(--color-button-primary-hover);
				}

				&:active,
				&:active.pressed {
					background: var(--color-button-primary-active);
				}
			}
		}
	}

	&.wa-accent {
		&:not(input[type='file']),
		&::file-selector-button {
			color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
			background: var(--color-button-primary-background);
		}

		&:not(:disabled) {
			&:not(input[type='file']),
			&::file-selector-button {
				&:hover,
				&:hover.pressed {
					background: var(--color-button-primary-hover);
				}
				&:active,
				&:active.pressed {
					background: var(--color-button-primary-active);
				}
			}
		}
	}
}
/* #endregion */

.button:has(> wa-icon:only-child),
button:has(> wa-icon:only-child) {
	width: var(--wa-form-control-height);
	/* aspect-ratio: 1 / 1; */
}

label {
	& + :is(input:not([type='checkbox'], [type='radio']), textarea, select), & > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
		margin-block-start: 0.2em;
	}
}

wa-button:not([variant]):not([appearance]) {
	/* === Default (standard) button === */
	&::part(base) {
		color: var(--wa-color-text);
		border-color: var(--color-button-border);
		background: var(--color-button-background);
	}

	&:hover:not(:disabled)::part(base),
	&.pressed:hover:not(:disabled)::part(base)  {
		background: var(--color-button-hover);
	}

	&:active:not(:disabled)::part(base),
	&.pressed:not(:disabled)::part(base) {
		background: var(--color-button-active);
	}

	/* === File selector variant === */
	&[type='file'] {
		&::part(base)::file-selector-button {
			color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
			background: var(--color-button-background);
		}

		&:hover:not(:disabled)::part(base)::file-selector-button {
			background: var(--color-button-hover);
		}

		&:active:not(:disabled)::part(base)::file-selector-button {
			background: var(--color-button-active);
		}
	}

	/* === Modifier: .primary (skeuomorphic) === */
	&.primary {
		&::part(base) {
			color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
			border-color: var(--color-button-primary-border);
			background: var(--color-button-primary-background);
		}

		&:hover:not(:disabled)::part(base),
		&.pressed:hover:not(:disabled)::part(base) {
			background: var(--color-button-primary-hover);
		}

		&:active:not(:disabled)::part(base),
		&.pressed:not(:disabled)::part(base) {
			background: var(--color-button-primary-active);
		}
	}
}

/* Apply pill radius globally - including [variant] and [appearance] buttons */
wa-button,
wa-dropdown,
button,
.button,
input:where([type='button'], [type='reset'], [type='submit'], [type='file']) {
	--wa-form-control-border-radius: var(--wa-border-radius-pill);
	border-radius: var(--wa-border-radius-pill);
}

/* Slight drop-shadows for buttons */
wa-button,
button,
.button,
input:where([type='button'], [type='reset'], [type='submit'], [type='file']) {
	box-shadow: var(--wa-shadow-s);
	&:active,
	&.pressed { 
		box-shadow: none; 
		transform: translateY(1px);
	}
}

/* Default button size - including [variant] and [appearance] buttons 
 * 
 * Gnome's UI is a default font size of 14px (--wa-font-size-s) for widgets, and a "body text" size of 16px, but the UI's are almost exclusively widgets. I'll leave things as 16px (--wa-font-size-m) for now.
*/
wa-button,
/* wa-radio, */   /* removed wa-radio as it was affecting the `size` attribute */
button,
.button,
input:where([type='button'], [type='reset'], [type='submit'], [type='file']) {
	font-size: var(--wa-font-size-m);
}


/* Style button themed radios to look like buttons too */
wa-radio[appearance="button"] {
	color: var(--wa-color-text);
	border-color: var(--color-button-border);
	background: var(--color-button-background);

	&:not(:disabled) {
		/* Ommitted `&:hover.pressed` because they're a toggle */
		&:hover  {
			background: var(--color-button-hover);
		}

		&:active,
		&.pressed,
		&[aria-checked="true"] {
			background: var(--color-button-active);
		}
	}
}


/* Hide the asterisk that Web Awesome automatically adds to [required] fields. */
*::part(form-control-label)::after {
	content: "";
}

/* Callouts */
wa-callout wa-icon[slot="icon"] {
	margin-left: -1.85rem; /* -28px */
}

wa-callout[variant="info"] {
	background-color: #e8f3ff; /* oklch(95.944% 0.01996 250.38) */;
	border-color: #d1e8ff; /* oklch(92.121% 0.03985 248.26) */
}
wa-callout[variant="info"] wa-icon[slot="icon"] {
	color: rgb(0, 83, 192);
}

wa-callout .action-row {
	margin-top: var(--wa-space-s);
}
@media screen and (max-width: 550px) {
	wa-callout .action-row {
		display: flex;
		flex-direction: column;
		gap: var(--wa-space-s);
	}
}

	

/* Don't do the hover for menu items that have controls in them (e.g. radio button groups) */
wa-dropdown-item.no-hover:hover:not(:state(disabled)) {
	background: none;
}

/* Make space for the carrot when the width isn't 100% */
select {
	padding-right: 3rem;
}

/* Don't round the borders for icon svgs */
button svg,
wa-radio svg,
.icon svg {
	border-radius: 0;
}

/* Icon buttons */
/* button:has(svg:only-child),
button:has(.icon:only-child) { */
.icon-button {
	/* height: var(--wa-form-control-height);
	width: var(--wa-form-control-height); */
	padding: 0;
	aspect-ratio: 1;
}
.icon-button.quiet:not(:hover) {
	box-shadow: none;
	background: none;
	border: none;
}