/* stylelint-disable selector-class-pattern -- BEM variants are part of the theme's public class API. */
.ckava-button,
:where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.875rem;
	max-inline-size: 100%;
	padding-block: 0.6875rem;
	padding-inline: 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--ckava-radius-pill);
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	overflow-wrap: anywhere;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ckava-button--primary,
:where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
	background: var(--ckava-color-accent);
	color: var(--ckava-color-ink);
}

.ckava-button--primary:hover,
:where(button, input[type="button"], input[type="submit"], input[type="reset"]):hover {
	background: var(--ckava-color-ink);
	color: var(--ckava-color-white);
}

.ckava-button--secondary {
	border-color: var(--ckava-color-forest);
	background: transparent;
	color: var(--ckava-color-forest);
}

.ckava-button--secondary:hover {
	background: var(--ckava-color-forest);
	color: var(--ckava-color-white);
}

.ckava-button:focus {
	outline: var(--ckava-focus-ring);
	outline-offset: 0;
	box-shadow: var(--ckava-focus-halo);
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled,
.ckava-button[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

:where(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"]), select, textarea) {
	inline-size: 100%;
	max-inline-size: 100%;
	min-block-size: 2.875rem;
	padding-block: 0.625rem;
	padding-inline: 0.875rem;
	border: 1px solid var(--ckava-color-border);
	border-radius: var(--ckava-radius-sm);
	background: var(--ckava-color-white);
	color: var(--ckava-color-ink);
	font: inherit;
}

textarea {
	min-block-size: 8rem;
	resize: vertical;
}

:where(input, select, textarea)::placeholder {
	color: #526157;
	opacity: 1;
}

:where(input, select, textarea):disabled {
	background: var(--ckava-color-warm);
	cursor: not-allowed;
}