.cc-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--black-alpha-1);
	z-index: 100000;
	justify-content: center;
	align-items: center;
	display: none;
	opacity: 0;
	transform: translateY(.75rem);
	transition-behavior: allow-discrete;
}

.cc-open .cc-overlay,
.cc-preferences-open .cc-overlay {
	display: flex;
	opacity: 1;
	transform: translateY(0);

	@starting-style {
		opacity: 0;
		transform: translateY(.75rem);
	}
}

.cc-box,
.cc-preferences {
	width: calc(100% - 2rem);
	border-radius: var(--border-radius-default);
	background: var(--white);
	font-size: var(--font-size-small);
	box-shadow: var(--box-shadow-default);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	display: none;
	opacity: 0;
	transform: translateY(.75rem);
	transition-behavior: allow-discrete;
}

.cc-open .cc-box,
.cc-preferences-open .cc-preferences {
	display: flex;
	opacity: 1;
	transform: translateY(0);

	@starting-style {
		opacity: 0;
		transform: translateY(.75rem);
	}
}

.cc-box {
	max-width: 38rem;
	position: fixed;
}

.cc-preferences {
	max-width: 42rem;
	height: calc(100% - 2rem);
	max-height: 42rem;
	position: fixed;
}

.cc-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem;
	border-bottom: 1px solid var(--pale);
}

.cc-header .cc-title {
	margin-bottom: 0;
}

.cc-close-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--border-radius-small);
	background: var(--pale);
	flex-shrink: 0;
	transition-duration: var(--transition-duration);
}

.cc-close-button:hover {
	background: var(--button-background-color-hover);
}

.cc-close-button svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke: var(--dark);
	transition-duration: var(--transition-duration);
}

.cc-close-button:hover svg {
	stroke: var(--button-text-color-hover);
}

.cc-body {
	height: 100%;
	padding: 1.5rem;
	overflow-y: auto;
}

.cc-title {
	font-size: var(--font-size-h4);
}

.cc-preferences-intro {
	margin-bottom: 1.5rem;
}

.cc-categories {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cc-category-title {
	background: var(--pale);
	border-radius: var(--border-radius-small);
	width: 100%;
	padding: 1rem 1rem 1rem 3rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	transition-duration: var(--transition-duration);
	transition-property: background;
}

.cc-category-open .cc-category-title {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.cc-category-title:hover {
	background: color-mix(in oklab, var(--pale) 95%, var(--black));
}

.cc-category-title-symbol {
	position: absolute;
	top: 50%;
	left: 1.5rem;
	transform: translateY(calc(-50% - .15rem)) rotate(45deg);
	width: .5rem;
	height: .5rem;
	border-right: 2px solid var(--black-alpha-2);
	border-bottom: 2px solid var(--black-alpha-2);
}

.cc-category-open .cc-category-title-symbol {
	transform: translateY(calc(-50% + .05rem)) rotate(225deg);
}

.cc-category-title-text {
	font-weight: var(--font-weight-bold);
}

input.cc-category-toggle {
	margin-right: 0;
}

.cc-category-description {
	display: none;
	border: 2px solid var(--pale);
	border-bottom-left-radius: var(--border-radius-small);
	border-bottom-right-radius: var(--border-radius-small);
	padding: 1.5rem;
}

.cc-category-wrapper.cc-category-open {
	.cc-category-description {
		display: block;
	}
}

.cc-footer {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: .5rem;
	padding: 1.5rem;
	border-top: 1px solid var(--pale);
}

.cc-footer .button-wrapper {
	font-size: var(--font-size-small);
}

.cc-accept-all.button-wrapper {
	padding: 0 3rem;
}

.cc-settings.button-wrapper,
.cc-necessary.button-wrapper,
.cc-save-selection.button-wrapper {
	background: var(--pale) !important;
	color: var(--black) !important;
}

.cc-settings.button-wrapper:hover,
.cc-necessary.button-wrapper:hover,
.cc-save-selection.button-wrapper:hover {
	background:
	 color-mix(in oklab, var(--pale) 95%, var(--black)) !important;
}

.cc-settings,
.cc-save-selection {
	margin-right: auto;
}

@media (max-width: 640px) {
	.cc-settings.button-wrapper,
	.cc-necessary.button-wrapper,
	.cc-save-selection.button-wrapper {
		width: calc(50% - .26rem);
	}

	.cc-accept-all {
		width: 100% !important;
	}
}

.cc-link {
	color: var(--text-color);
}

.cc-link:hover {
	color: var(--link-color-hover);
}