:root {
	--sbdocs-max-width: 768px;
}

.sb-preparing-docs {
	display: none;
}

.sb-show-preparing-docs > .sb-preparing-story {
	display: block !important;
}

.sb-show-main {
	&.sb-main-fullscreen {
		padding: 0 10px;
	}

	.sbdocs-wrapper {
		max-width: 100%;
		padding: 0;
		justify-content: left;
		box-sizing: content-box;

		.sbdocs-content {
			max-width: 100%;
		}
	}
}

.sbdocs-preview.sb-unstyled {
	max-width: var(--sbdocs-max-width);
	padding-top: 0;

	.sb-bar {
		display: none;
	}
}

.sbdocs-preview.sb-unstyled code[class^='css'] {
	border: 1px solid #dde6ee;
	border-radius: var(--sds-radius-2);
	font-family: var(--sds-typography-font-family-code);
	font-size: 14px;
	background-color: var(--sds-color-global-deepblue-100);
}

.sbdocs-preview.sb-unstyled[class*='css-'],
.sbdocs-preview.sb-unstyled *[class*='css-'],
.sbdocs-preview [class*='css-'] {
	font-family: var(--sds-typography-font-family) !important;
}

.sbdocs-preview.sb-unstyled[class*='css-'] pre,
.sbdocs-preview.sb-unstyled[class*='css-'] pre *,
.sbdocs-preview.sb-unstyled *[class*='css-'] code,
.sbdocs-preview.sb-unstyled *[class*='css-'] code * [class*='css-'] {
	font-family: var(--sds-typography-font-family-code) !important;
	white-space: nowrap !important;

	.token {
		white-space: pre !important;
	}
	span[class=''] {
		white-space: nowrap !important;
		display: block;
	}
}

.sbdocs code,
.sbdocs code *,
.sbdocs pre,
.sbdocs pre * {
	font-family: var(--sds-typography-font-family-code) !important;
}

.sbdocs-preview .docs-story button.docblock-code-toggle--expanded {
	display: none;
}

.sbdocs-preview.sb-unstyled[class*='css-'] pre [class*='language-html'] {
	padding-left: 0.75rem;

	.token.punctuation:first-child {
		margin-left: -0.75rem;
	}

	span[class=''] + .tag.punctuation {
		margin-left: -0.75rem;
	}
}

.sbdocs-expandable,
.sbdocs-expandable * {
	color: var(--sds-color-semantic-text-default) !important;
}

.sheriff-example {
	border: 1px solid #dde6ee;
	border-radius: 4px;
	max-width: var(--sbdocs-max-width);
	margin: 0 0 var(--sds-spacing-9) 0;

	&.sheriff-example--compact {
		margin: 0;
	}
}

.sheriff-example__preview {
	padding: 1.5rem;
	max-height: 350px;
	overflow: auto;

	+ .sheriff-example__code {
		border-top: 1px solid #dde6ee;
	}
}

.sbdocs-preview.sb-unstyled > div:last-child {
	border-top: 1px solid #dde6ee;
}

.sheriff-example__code {
	position: relative;
	max-height: 350px;
	overflow: auto;
}

.sheriff-example__stack {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sheriff-example .sheriff-example__code .docblock-source,
.sbdocs-preview > [class^='css-'] pre.prismjs {
	background-color: #f1f5f8;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--sds-typography-font-family-code) !important;
	margin: 0;
}

.sbdocs-preview > [class^='css-'] pre.prismjs {
	font-size: 14px;
	font-weight: var(--sds-typography-base-font-weight);
	line-height: var(--sds-typography-base-line-height);
	color: var(--sds-color-semantic-text-default);
}

.sheriff-example .sheriff-example__code .docblock-source,
.sbdocs-preview.sb-unstyled > div:last-child {
	> div:last-child {
		padding: 0.25rem;
		background-color: #f1f5f8;
		position: absolute;
		top: 0.25rem;
		right: 0.5rem;
		bottom: auto;

		button {
			position: relative;
			display: block;
			align-items: center;
			font-size: 16px;
			border: none;
			background-color: #f1f5f8;
			cursor: pointer;
			overflow: hidden;
			border-radius: 4px;
			width: 32px;
			height: 32px;
			padding: 0;

			&:focus {
				outline: 2px solid var(--sds-color-semantic-surface-action-default);
				outline-offset: 1px;
			}

			&:hover {
				background-color: var(--sds-color-semantic-surface-action-subtle);
				border: 2px solid var(--sds-color-semantic-surface-action-hover);
			}

			&:active {
				background-color: var(--sds-color-semantic-surface-action-active);
				border: 2px solid var(--sds-color-semantic-surface-action-active);
				color: var(--sds-color-semantic-text-on-action);
				outline: 0;

				&::before {
					content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z'></path></svg>");
				}
			}

			&::before {
				content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'><path d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z'></path></svg>");
				display: inline-block;
				width: 20px;
				height: 20px;
				vertical-align: middle;
				z-index: 2;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: inherit;
				z-index: 1;
			}
		}
	}
}

.sheriff-example.sheriff-example--compact .sheriff-example__code .docblock-source > div:last-child {
	padding: 0.125rem;
	top: 3px;
	right: 1px;

	button {
		width: 24px;
		height: 24px;

		&::before {
			width: 16px;
			height: 16px;
		}
	}
}

.sheriff-example__code > pre {
	margin: 0;
}

.sheriff-example--compact .sheriff-example__code > pre {
	font-size: 0.75rem;
}

.sheriff-example__section {
	border-top: 1px solid var(--sds-color-semantic-border-divider);
	padding-top: 3rem;
	margin-top: 3.5rem;
}

.sheriff-color-overview {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--sds-color-semantic-border-divider);
	padding-bottom: 2rem;
	margin-bottom: 3rem;
	max-width: var(--sbdocs-max-width);
}

.sheriff-color-overview--list {
	flex-direction: column;
	gap: 1rem;
}

.sheriff-color {
	width: 372px;
	position: relative;
	padding-left: calc(50px + 1rem);
}

.sheriff-color__preview {
	border-radius: var(--sds-radius-4);
	box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.1);
	display: block;
	width: 50px;
	height: 70px;
	margin: 0 0 0.5rem;
	position: absolute;
	left: 0;
	text-align: center;
	font-size: 40px;
	line-height: 70px;
}

.sheriff-color__util-background {
	padding: 0.5rem;
	border-radius: 2px;
}

.sheriff-color__util-text {
	margin: 0;
}

.sheriff-color__util-icon {
	display: flex;
	gap: 0.25rem;
}

.sheriff-color__util-code {
	margin: 0;
}

.sheriff-color__util-border {
	border-style: solid;
	border-width: 2px;
	border-radius: 2px;
	padding: 0.5rem;
}

.sheriff-example__spacing {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: var(--sbdocs-max-width);
}

/* margin */
.sheriff-example__spacing-outer {
	background-color: var(--sds-color-semantic-surface-info-moderate);
	border-top: 0.5rem solid var(--sds-color-semantic-surface-default);
	border-bottom: 0.5rem solid var(--sds-color-semantic-surface-default);
}

/* padding */
.sheriff-example__spacing {
	background-color: var(--sds-color-semantic-surface-critical-moderate);
}

.sheriff-example__spacing-inner {
	background-color: var(--sds-color-semantic-surface-attention-subtle);
	display: block;
	margin: 0;
}

.sheriff-example__stacking {
	max-width: var(--sbdocs-max-width);
}

.sheriff-example__block {
	display: inline-block;
	border-block: 4px solid var(--sds-color-semantic-surface-info-xtreme);
	border-inline: 1px dashed var(--sds-color-semantic-surface-info-moderate);
	width: 50px;
	height: 16px;
	position: relative;
	bottom: -3px;
}

.sheriff-example__block-start {
	display: inline-block;
	border: 1px dashed var(--sds-color-semantic-surface-info-moderate);
	border-block-start: 4px solid var(--sds-color-semantic-surface-info-xtreme);
	width: 50px;
	height: 16px;
	position: relative;
	bottom: -3px;
}

.sheriff-example__block-end {
	display: inline-block;
	border: 1px dashed var(--sds-color-semantic-surface-info-moderate);
	border-block-end: 4px solid var(--sds-color-semantic-surface-info-xtreme);
	width: 50px;
	height: 16px;
	position: relative;
	bottom: -3px;
}

.sheriff-example__inline {
	display: inline-block;
	border-inline: 4px solid var(--sds-color-semantic-surface-info-xtreme);
	border-block: 1px dashed var(--sds-color-semantic-surface-info-moderate);
	width: 50px;
	height: 16px;
	position: relative;
	bottom: -3px;
}

.sheriff-example__inline-start {
	display: inline-block;
	border: 1px dashed var(--sds-color-semantic-surface-info-moderate);
	border-inline-start: 4px solid var(--sds-color-semantic-surface-info-xtreme);
	width: 50px;
	height: 16px;
	position: relative;
	bottom: -3px;
}

.sheriff-example__inline-end {
	display: inline-block;
	border: 1px dashed var(--sds-color-semantic-surface-info-moderate);
	border-inline-end: 4px solid var(--sds-color-semantic-surface-info-xtreme);
	width: 50px;
	height: 16px;
	position: relative;
	bottom: -3px;
}

.sheriff-example__space-scale-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sheriff-example__space-scale {
	display: inline-block;
	background-color: var(--sds-color-semantic-surface-info-xtreme);
	height: 1rem;
}

.sheriff-example__radius-scale {
	display: inline-block;
	aspect-ratio: 1 / 1;
	background-color: var(--sds-color-semantic-surface-info-xtreme);
}

.sheriff-example__table {
	border-collapse: collapse;
	width: 100%;
	max-width: var(--sbdocs-max-width);

	tr {
		th,
		td {
			border-bottom: 1px solid var(--sds-color-semantic-border-divider);
		}

		th {
			border-width: 2px;
			text-align: left;
			padding: 8px;
			min-height: 40px;
			vertical-align: bottom;

			&:last-child {
				width: auto;
			}
		}

		td {
			min-height: 48px;
			padding: 8px;
		}

		&:hover {
			background-color: var(--sds-color-semantic-surface-action-subtle);
		}
	}
}

.sheriff-example__content-container {
	max-width: var(--sbdocs-max-width);
}

.sheriff-example__frontpage-container {
	max-width: 1280px;
}

.sheriff-example__entrances {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	grid-auto-flow: row;
}

.sr-only:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ARGS TABLE */
.docblock-argstable.sb-unstyled[class*='css-'] {
	font-family: var(--sds-typography-font-family);
	font-size: 1rem;
	max-width: var(--sbdocs-max-width);

	.docblock-argstable-head {
		tr {
			th:last-child {
				button {
					display: none;
				}
			}
		}
	}

	.docblock-argstable-body {
		filter: none;

		td {
			span[class*='css-'] {
				font-family: var(--sds-typography-font-family-code);
				font-size: 0.75rem;
				padding: 2px 5px;
				border-radius: 3px;
				border: 1px solid #ecf4f9;
				color: var(--sds-color-semantic-text-default);
				background-color: #f7fafc;
				margin: 0 4px 4px 0;
				line-height: 13px;
			}
		}
	}

	tr {
		th,
		td {
			border-bottom: 1px solid var(--sds-color-semantic-border-divider) !important;
			border-top: 0 !important;
			color: var(--sds-color-semantic-text-default);
		}

		th {
			border-width: 2px !important;
			text-align: left;
			padding: 8px;
			min-height: 40px;
			vertical-align: bottom;
		}

		td {
			background-color: transparent !important;
			min-height: 48px !important;
			padding: 8px !important;
			border-radius: 0 !important;
			border-left: 0 !important;
			border-right: 0 !important;

			span {
				font-weight: 400 !important;
			}
		}

		&:hover {
			background-color: var(--sds-color-semantic-surface-action-subtle);
		}
	}
}

.sheriff-table--remove-last-column {
	tr {
		td:last-child,
		th:last-child {
			display: none;
		}
	}
}

/* Selectors to remove empty boolean attributes like <sds-radio checked=""> and just display <sds-radio checked> */
span.token.tag.attr-name
	+ span.token.tag.attr-value.punctuation.attr-equals
	+ span.token.tag.attr-value.punctuation
	+ span.token.tag.attr-value.punctuation {
	display: none;
}

span.token.tag.attr-name
	+ span.token.tag.attr-value.punctuation.attr-equals
	+ span.token.tag.attr-value.punctuation:has(+ span.token.tag.attr-value.punctuation) {
	display: none;
}

span.token.tag.attr-value.punctuation.attr-equals:has(
		+ span.token.tag.attr-value.punctuation + span.token.tag.attr-value.punctuation
	) {
	display: none;
}