:root {
	--cms-font-family: 'Roboto', sans-serif;
	--cms-text-color: darkslategrey;
	--cms-text-color-secondary: grey;
	--cms-text-color-active: teal;
	--cms-light: white;
	--cms-accent: whitesmoke;
	--cms-dark: darkslategrey;
	--cms-dark-active: teal;
	--cms-cta: teal;
	--cms-cta-active: darkcyan;
	--cms-content: deepskyblue;
	--cms-layout: tomato;
	--cms-border-color: lightgray;
	--cms-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.35);
	--cms-sidebar-width: 250px;
}

body {
	margin: 0;
	padding-left: var(--cms-sidebar-width);
}

body:has(.cms-dialog[open]) {
	overflow: hidden;
}

/* TODO Add body:has(.cms-sidebar) ... rule to components instead */
body .header-menu {
	left: var(--cms-sidebar-width) !important;
	max-width: calc(100% - var(--cms-sidebar-width)) !important;
	right: 0;
	transition: left 0.3s ease, max-width 0.3s ease;
}
body .header-menu:has(nav.menu:hover) {
	left: 0 !important;
	max-width: 100% !important;
}

.cms-cta,
.html-editor .cta-block .cta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	--svg-color: var(--cms-light);
	background-color: var(--cms-cta);
	color: var(--cms-light);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	border-radius: 8px;
	border: none;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	line-height: normal;
	text-decoration: none;
	padding: 12px 32px;
	min-height: 48px;
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
}

.cms-cta.secondary {
	--svg-color: var(--cms-cta);
	background-color: transparent;
	color: var(--cms-cta);
	border: 2px solid var(--cms-cta);
}

.cms-cta svg {
	width: 20px;
	height: 20px;
	fill: var(--svg-color);
	transition: fill 0.3s ease, stroke 0.3s ease;
}

.cms-cta:hover,
.cms-cta.secondary:hover,
.html-editor .cta-block .cta:hover {
	--svg-color: var(--cms-light);
	background: var(--cms-cta-active);
	color: var(--cms-light);
}

.cms-cta.secondary:hover {
	border: 2px solid var(--cms-cta-active);
}