/*
** Remove italics from secondary buttons
*/
em:has(a.button) {
	font-style: normal;
}

.button-container:has(button),
.button-container:has(a.button) {
	height: max-content;
}

a.button:any-link,
button,
.dropin-button.dropin-button--primary {
	font: var(--type-sm-16-semibold-font);
	letter-spacing: var(--type-sm-16-semibold-letter-spacing);
	padding: 19px var(--spacing-5x);
	border-radius: var(--border-radius-interactive);
	display: inline-block;
	line-height: 1;
	height: var(--button-height);
	box-sizing: border-box;
	text-decoration: none;
	border: 1px solid transparent;
	text-align: center;
	cursor: pointer;
	color: var(--color-white);
	background-color: var(--color-evident-blue);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
	max-width: 100%;
}

button u,
a.button u {
	text-decoration: none;
}

a.button:hover,
button:hover,
.dropin-button.dropin-button--primary:hover,
.dropin-button.dropin-button--primary:hover:focus {
	background-color: var(--color-evident-blue-400);
}

a.button:active,
button:active,
.dropin-button.dropin-button--primary:active {
	background-color: var(--color-evident-blue-800);
}

a.button.secondary,
button.secondary,
.dropin-button.dropin-button--primary.secondary {
	background-color: unset;
	border: 1px solid var(--color-evident-blue);
	color: var(--color-evident-blue);
}

a.button:focus,
button:focus,
a.button.secondary:focus,
button.secondary:focus,
.dropin-button.dropin-button--primary:focus {
	outline: 1px solid var(--color-button-outline);
}

.dropin-button.dropin-button--primary:focus {
	background-color: var(--color-evident-blue);
}

.dropin-button.dropin-button--primary.secondary:focus {
	background-color: unset;
}

a.button.secondary:hover,
button.secondary:hover,
.dropin-button.dropin-button--primary.secondary:hover {
	background-color: rgb(var(--color-evident-blue-rgb) 0.1);
}

a.button.secondary:active,
button.secondary:active,
.dropin-button.dropin-button--primary.secondary:active {
	background-color: var(--color-evident-blue-100);
}

a.button.secondary.black,
button.secondary.black {
	background-color: unset;
	border: 1px solid var(--color-dark-gray);
	color: var(--color-dark-gray);
}

a.button.secondary.black:hover,
button.secondary.black:hover {
	background-color: rgb(var(--color-dark-gray-rgb) 0.1);
}

a.button.secondary.black:active,
button.secondary.black:active {
	background-color: rgb(var(--color-dark-gray-rgb) 0.25);
}

a.button.secondary.black:focus,
button.secondary.black:focus {
	outline: 1px solid var(--color-button-outline);
}

a.button.secondary.white,
button.secondary.white {
	background-color: unset;
	border: 1px solid var(--color-white);
	color: var(--color-white);
}

a.button.secondary.white:hover,
button.secondary.white:hover {
	background-color: rgb(var(--color-white) 0.2);
}

a.button.secondary.white:active,
button.secondary.white:active {
	background-color: rgb(var(--color-white) 0.35);
}

a.button.secondary.white:focus,
button.secondary.white:focus {
	outline: 1px solid var(--color-white);
}

a.button.secondary.red,
button.secondary.red {
	background-color: unset;
	border: 1px solid var(--color-red);
	color: var(--color-red);
}

a.button.secondary.red:hover,
button.secondary.red:hover {
	background-color: rgb(var(--color-red-rgb) 0.05);
}

a.button.secondary.red:active,
button.secondary.red:active {
	background-color: rgb(var(--color-red-rgb) 0.1);
}

a.button.secondary.red:focus,
button.secondary.red:focus {
	outline: 1px solid var(--color-button-outline);
}

button.secondary:disabled,
button.secondary:disabled:hover,
button.secondary:disabled:active,
button.secondary.black:disabled,
button.secondary.black:disabled:hover,
button.secondary.black:disabled:active,
button.secondary.red:disabled,
button.secondary.red:disabled:hover,
button.secondary.red:disabled:active,
button.secondary.white:disabled,
button.secondary.white:disabled:hover,
button.secondary.white:disabled:active,
.dropin-button.dropin-button--primary:disabled,
.dropin-button.dropin-button--primary:disabled:hover,
.dropin-button.dropin-button--primary:disabled:active {
	background-color: unset;
	border: 1px solid var(--color-button-disabled);
	color: var(--color-button-disabled);
	cursor: unset;
}

a.button.small,
button.small {
	font: var(--type-xs-14-semibold-font);
	letter-spacing: var(--type-xs-14-semibold-letter-spacing);
	height: var(--button-height-small);
	padding: var(--spacing-3x) var(--spacing-5x);
	line-height: 1;
}

a.button.black,
button.black {
	background-color: var(--color-dark-gray);
	color: var(--color-white);
}

a.button.black:hover,
button.black:hover {
	background-color: var(--color-button-black-hover);
}

a.button.black:active,
button.black:active {
	background-color: var(--color-black);
}

a.button.black:focus,
button.black:focus {
	outline: 1px solid var(--color-light-gray-30);
}

a.button.white,
button.white {
	background-color: var(--color-white);
	color: var(--color-evident-blue);
}

a.button.white:hover,
button.white:hover {
	background-color: var(--color-light-gray);
}

a.button.white:active,
button.white:active {
	background-color: var(--color-evident-blue-50);
}

a.button.white:focus,
button.white:focus {
	outline: 1px solid var(--color-light-gray-30);
}

a.button.red,
button.red {
	background-color: var(--color-red);
	color: var(--color-white);
}

a.button.red:hover,
button.red:hover {
	background-color: var(--color-button-red-hover);
}

a.button.red:active,
button.red:active {
	background-color: var(--color-red);
}

a.button.red:focus,
button.red:focus {
	outline: 1px solid var(--color-button-outline);
}

button:disabled,
button:disabled:hover,
button:disabled:active,
button.black:disabled,
button.black:disabled:hover,
button.black:disabled:active,
button.red:disabled,
button.red:disabled:hover,
button.red:disabled:active,
button.white:disabled,
button.white:disabled:hover,
button.white:disabled:active {
	background-color: var(--color-button-disabled);
	cursor: unset;
}

a.button.small.black:focus,
button.small.black:focus,
a.button.small.red:focus,
button.small.red:focus {
	outline: 1px solid var(--color-evident-blue);
}

a.button.small.white:focus,
button.small.white:focus {
	outline: 1px solid var(--color-white);
}

.icon-button span {
	display: block;
}

button.checkbox-button {
	background: unset;
	color: var(--color-dark-gray);
	font: var(--type-sm-16-regular-font);
	letter-spacing: var(--type-sm-16-regular-letter-spacing);
	border-radius: unset;
	height: unset;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-2x);
	padding: 0;
	margin: 1px;
}

button.checkbox-button:hover,
button.checkbox-button:focus {
	background-color: unset;
}

button.checkbox-button:not(:focus-visible) {
	outline: none;
}

button.checkbox-button .icon-span {
	background-image: url('../icons/checkbox-unchecked.svg');
	background-repeat: no-repeat;
	background-position: center;
	min-height: 24px;
	min-width: 24px;
	max-height: 24px;
	max-width: 24px;
}

button.checkbox-button.checked .icon-span {
	border-radius: 5px;
	min-height: 14px;
	min-width: 14px;
	max-height: 14px;
	max-width: 14px;
	border: 1px solid var(--color-evident-blue);
	background-color: var(--color-evident-blue);
	background-image: url('../icons/check-mark-white.svg');
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 4px;
}

@media (width >= 1290px) {
	.icon-button span.hide-on-desktop {
		height: 0;
		margin: 0;
		overflow: hidden;
		opacity: 0;
		width: 0;
	}
}