.style-settings-export {
	margin-right: 0;
}

/* the "download settings" button is not needed for *every single* section */
.style-settings-container .setting-item-heading:not([data-level="0"])
	.extra-setting-button:last-child {
	display: none;
}

.style-settings-heading.style-settings-heading.style-settings-heading {
	padding: 0;
	margin-top: 10px;
	border-bottom: var(--muted-border);
}

.style-settings-heading .setting-item-name {
	margin-top: 8px;
	margin-bottom: 3px;
	font-family: var(--font-interface);
	font-size: 1rem;
	line-height: 1em;
	letter-spacing: 0;
}

.style-settings-heading .setting-item-name:hover {
	color: var(--text-accent-hover);
}

.style-settings-heading:not(.is-collapsed) .setting-item-name {
	font-weight: 600;
}

.style-settings-heading.is-collapsed .setting-item-name {
	font-weight: 500;
}

.style-settings-heading :is(.setting-item-title, .setting-item-description) {
	margin-left: 1px;
}

body .style-settings-heading[data-level="0"] {
	margin-bottom: 16px;
}

body
	.style-settings-heading[data-level="0"]
	.setting-item-name.setting-item-name.setting-item-name.setting-item-name {
	font-family: var(--font-heading-theme);
	font-size: var(--h2-size);
	letter-spacing: var(--heading-letter-spacing);
}

/* settings tab / general */
.style-settings-heading[data-level="2"] + .style-settings-container,
.style-settings-heading[data-level="2"][data-level="2"] {
	margin-left: 20px;
}

.style-settings-heading
	+ .style-settings-container
	.style-settings-heading[data-level="2"]
	.setting-item-name {
	font-size: 1rem;
	letter-spacing: 0;
}

.style-settings-container .setting-editor-extra-setting-button {
	margin-left: 10px;
}

.style-settings-heading[data-level="0"]
	.setting-item-name.setting-item-name.setting-item-name.setting-item-name {
	margin-bottom: 4px;
	font-size: 1.1em;
}

.style-settings-container .setting-item-description {
	margin-bottom: 4px;
	font-family: var(--font-interface);
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.3em;
}

.style-settings-container
	.setting-item:not(.setting-item-heading)
	.setting-item-name
	+ .setting-item-description {
	margin-top: 4px;
	margin-bottom: 0;
}

.style-settings-heading:not(.is-collapsed) .setting-item-description {
	display: none;
}

.setting-item-description strong {
	color: var(--text-muted);
}

/* fold indicators */
.style-settings-collapse-indicator > .svg-icon {
	width: 0.6em;
	height: 0.6em;
	stroke-width: 4px;

	&:hover {
		stroke: var(--icon-color-hover);
	}
}

/* ───────────────────────────────────────────────── */
/** Style Settings: As Tab
──────────────────────────────────────────────────── */

.workspace-leaf-content[data-type="style-settings"] .view-content .setting-item:first-child {
	/* avoid collision with three dots button */
	padding-top: 12px;
}

.workspace-leaf-content[data-type="style-settings"] .view-content {
	padding: 30px;
}

/* FIX for https://github.com/mgmeyers/obsidian-style-settings/issues/104 */
body .view-content .style-settings-container .setting-item:not(.setting-item-heading) {
	flex-direction: row;
}

/* ───────────────────────────────────────────────── */
/** Style Settings: Infoboxes
──────────────────────────────────────────────────── */

.setting-item[data-id="appendix-info"] {
	display: none;
}

body .setting-item.setting-item.setting-item.setting-item[data-id="author-info"] {
	margin-top: 40px;
}

.style-settings-info-text.setting-item.setting-item.setting-item.setting-item {
	padding: 8px;
	margin-top: 12px;
	margin-bottom: 12px;
	background-color: var(--bg1);
	border: var(--basic-border);
	border-radius: var(--radius-s);
}

.style-settings-info-text ul {
	padding-left: 16px;
}

.style-settings-info-text li {
	margin-bottom: 2px;
}

.style-settings-info-text
	.setting-item-description.setting-item-description.setting-item-description.setting-item-description {
	padding-top: 0;
	margin-top: 0;
}

.setting-item-description code {
	position: relative;
	bottom: 0;
	padding-bottom: 0;
	font-size: 0.8rem;
	color: var(--inline-code-color);
}

.style-settings-info-text .setting-item-name:not(:empty) {
	margin-bottom: 8px;
}

.workspace-leaf-content[data-type="style-settings"]
	.style-settings-info-text.setting-item.setting-item {
	background-color: var(--bg4);
}

/* ───────────────────────────────────────────────── */
/** Style Settings: Hue Sliders & Color Demo Boxes
──────────────────────────────────────────────────── */

/* use hue slider */
.style-settings-container {
	--demo-box-size: var(--icon-l);
	--hue-slider-sat: 70%;
	--hue-slider-br: 60%;
	--hue-scale: linear-gradient(
		to right,
		hsl(0 var(--hue-slider-sat) var(--hue-slider-br)),
		hsl(30 var(--hue-slider-sat) var(--hue-slider-br)),
		hsl(60 var(--hue-slider-sat) var(--hue-slider-br)),
		hsl(90 var(--hue-slider-sat) var(--hue-slider-br)),
		hsl(120 var(--hue-slider-sat) var(--hue-slider-br)),
		hsl(150 var(--hue-slider-sat) var(--hue-slider-br)),
		hsl(180 var(--hue-slider-sat) var(--hue-slider-br)),
		hsl(210 var(--hue-slider-sat) var(--hue-slider-br)),
		hsl(240 var(--hue-slider-sat) var(--hue-slider-br)),
		hsl(270 var(--hue-slider-sat) var(--hue-slider-br)),
		hsl(300 var(--hue-slider-sat) var(--hue-slider-br)),
		hsl(330 var(--hue-slider-sat) var(--hue-slider-br)),
		hsl(360 var(--hue-slider-sat) var(--hue-slider-br))
	);
}

.style-settings-container
	.setting-item:is([data-id="highlight-hue-1"], [data-id^="bg-hue"])
	input.slider {
	height: 0.8em;
	background: var(--hue-scale);
	border-radius: var(--radius-xs);
}

.style-settings-container
	.setting-item:is([data-id="highlight-hue-1"], [data-id^="bg-hue"])
	input.slider::after,
.style-settings-container
	.setting-item:is([data-id="highlight-hue-1"], [data-id^="bg-hue"])
	input.slider::before {
	display: none;
}

.style-settings-container
	.setting-item:is([data-id="highlight-hue-1"], [data-id^="bg-hue"])
	input.slider::-webkit-slider-thumb {
	position: relative;
	top: -0.7em;
	width: 0.4em;
	height: 1.9em;
	background-color: var(--text-muted);
	border-radius: var(--radius-xs);
}

/* DEMO COLOR BOX */
.style-settings-container .setting-item[data-id="highlight-hue-1"] .setting-item-control::before {
	content: " ";
	position: relative;
	left: -3em;
	width: 1.6em;
	height: 1.6em;
	font-size: 0.7em;
	color: var(--text-normal);
	text-align: center;
	white-space: pre-wrap;
	border: var(--thin-border);
	border-radius: var(--radius-s);
	background-color: hsl(var(--highlight-hue-1) var(--highlight-sla-values));
}
