:root {
	--transition: all 0.2s ease-in-out;
	--button-shadow-static: 2px 2px 3px 1px rgba(74, 73, 74, 0.251);
	--button-shadow-hover: 3px 3px 4px 1px rgba(74, 73, 74, 0.251);
	--button-shadow-disabled: 1.4px 1.4px 2px 1px rgba(74, 73, 74, 0.251);
	--button-radius-static: 4px;
	--button-radius-hover: 4px 16px 4px 16px;
}

/* =============================================================================
   Base Button Styles
   ============================================================================= */

.primary-button,
.secondary-button,
.tertiary-button,
.reverse-button,
.post-password-form input[type="submit"] {
	display: inline-block;
	padding: 10.5px 20px;
	text-decoration: none;
	text-align: center;
	border-radius: var(--button-radius-static);
	box-shadow: var(--button-shadow-static);
	transition: var(--transition);
	cursor: pointer;
	border: none;
	appearance: none;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 27px;
	/* 150% */
	letter-spacing: 0.36px;

	/* Color properties - overridden by each variant */
	background-color: var(--button-bg);
	color: var(--button-color);

	&:hover {
		background-color: var(--button-hover-bg);
		color: var(--button-hover-color);
		border-radius: var(--button-radius-hover);
		box-shadow: var(--button-shadow-hover);
		text-decoration: none;
		transform: scale(1.05);
		transition: var(--transition);
	}

	&:has(input:focus),
	&:focus,
	&:has(input:focus-visible),
	&:focus-visible {
		background-color: var(--button-focus-bg);
		color: var(--button-focus-color);
		border-radius: var(--button-radius-hover);
		outline: none;
		box-shadow: 0 0 0 2px var(--custom-sunflower), 0 0 0 4px var(--custom-deeper-blue), var(--button-shadow-hover);
		text-decoration: none;
		transform: scale(1.05);
		transition: var(--transition);
	}


	&:active {
		transform: translateY(0);
		transition: var(--transition);
	}

	&[disabled],
	&.disabled {
		background-color: #EBEBEB;
		color: #302F2F;
		box-shadow: var(--button-shadow-disabled);
		pointer-events: none;
	}
}

/* =============================================================================
   Button Variants
   ============================================================================= */

.post-password-form input[type="submit"],
.primary-button {
	--button-bg: var(--custom-deeper-blue);
	--button-color: #FFFFFF;
	--button-hover-bg: var(--custom-deeper-blue);
	--button-hover-color: #FFFFFF;
	--button-focus-bg: var(--custom-deeper-blue);
	--button-focus-color: #FFFFFF;
}

.secondary-button {
	--button-bg: var(--custom-sunflower);
	--button-color: #302F2F;
	--button-hover-bg: var(--custom-tangerine);
	--button-hover-color: #302F2F;
	--button-focus-bg: var(--custom-sunflower);
	--button-focus-color: #302F2F;
}

.tertiary-button {
	--button-bg: var(--custom-coral);
	--button-color: #FFFFFF;
	--button-hover-bg: #D95238;
	--button-hover-color: #FFFFFF;
	--button-focus-bg: #F1F5F6;
	--button-focus-color: #302F2F;
}

.reverse-button {
	--button-bg: #FFFFFF;
	--button-color: #302F2F;
	--button-hover-bg: var(--custom-aquamarine);
	--button-hover-color: #302F2F;
	--button-focus-bg: #F1F5F6;
	--button-focus-color: #302F2F;
}