/* Styles for the showcases */
.desktop-navigation ul {
	list-style-type: "";
	display: flex;
}

.default-container {
	display: flex;
	flex-direction: column;
	gap: var(--db-spacing-fixed-md);
	padding: var(--db-spacing-fixed-md);
}

.component-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--db-spacing-fixed-md);
}

/* Linebreak for variant cards */
.line-break {
	inline-size: 100vw;
}

.variants-card,
.variants-card > .db-card {
	min-block-size: var(--db-sizing-3xl);
	align-items: center;
	justify-content: center;
	padding: var(--db-spacing-fixed-xl);
	padding-block-end: calc(var(--db-spacing-fixed-xl) + var(--db-sizing-sm));
}

db-card:is(.variants-card) > .db-card {
	padding: var(--db-spacing-fixed-sm);
}

.variants-list {
	display: flex;
	flex-wrap: wrap;
	inline-size: 100%;
	justify-content: center;
	gap: var(--db-spacing-fixed-md);
}

.variants-list > div {
	align-items: center;
	display: flex;
	gap: var(--db-spacing-fixed-md);
}

.variants-list .db-select,
.w-full {
	inline-size: 100%;
}

.variants-list .db-select,
.variants-list .db-input,
.variants-list .db-textarea {
	margin-block-start: auto;
}

.variants-list .db-select:has([placeholder="(Default) Basic"]),
.variants-list .db-input:has([placeholder="(Default) Basic"]),
.variants-list .db-textarea:has([placeholder="(Default) Basic"]) {
	margin-block: 0 auto;
}

.html-code-container {
	display: flex;
	flex-direction: column;
	gap: var(--db-spacing-fixed-md);
}

.example-name {
	margin-block: 0 var(--db-spacing-fixed-md);
}

.link-headline {
	display: block;
	margin-block: var(--db-spacing-fixed-md);
	font-weight: 700;
}

/**
 component container styles
**/

.form-container {
	display: flex;
	gap: var(--db-spacing-fixed-md);
	margin: var(--db-spacing-fixed-md);
}

.form-container fieldset {
	/* Disabling fieldset styles in this specific case */
	padding: 0;
	border-color: transparent;
}

.form-container > div {
	flex-direction: column;
	inline-size: 50%;
}

.button-container {
	display: flex;
	gap: var(--db-spacing-fixed-md);
	padding: var(--db-spacing-fixed-md);
}

.input-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--db-spacing-fixed-md);
	padding: var(--db-spacing-fixed-md);
}

.input-container > form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--db-spacing-fixed-md);
}

.badge-inline-container {
	display: flex;
	gap: var(--db-spacing-fixed-sm);
	padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-sm);
	background-color: var(--db-adaptive-bg-basic-level-2-default);
}

.badge-inline-container .db-badge {
	margin-inline-start: var(--db-spacing-responsive-md);
	margin-block: auto;
}

.fixed-header-footer {
	overflow: hidden;
}

.tab-hide-article article {
	display: none !important;
}

.db-page.fixed-header-footer main {
	overflow-x: hidden;
	overflow-inline: hidden;
}

:root:has(.db-page) {
	block-size: 100%;
	overflow: hidden;
}

main .db-header {
	block-size: 100%;
}

.stack-container {
	padding: var(--db-spacing-fixed-xs);
}

.stack-show-alignment {
	border: var(--db-border-width-3xs) dashed
		var(--db-adaptive-on-bg-basic-emphasis-60-default);
}

.dummy-component {
	border-radius: var(--db-border-radius-md);
	border: var(--db-border-width-3xs) solid
		var(--db-adaptive-on-bg-basic-emphasis-60-default);
	background-color: var(--db-adaptive-bg-basic-level-3-default);
	color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
	display: flex;
	padding: var(--db-spacing-fixed-3xs) var(--db-spacing-fixed-xs);
	justify-content: center;
	align-items: center;
	font: var(--db-type-body-2xs);
	font-weight: 700;

	a {
		text-decoration: none;
	}

	text-wrap: nowrap;
}

.section-card-container {
	display: grid;
	gap: var(--db-spacing-fixed-sm);
	grid-template-columns: repeat(1, minmax(0, 1fr));

	@media screen and (width >= 768px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.db-card {
		inline-size: 100%;
	}
}

.nav-item-list {
	inline-size: 100%;
	padding: 0;
}

.default-content-slot {
	background-color: var(--db-successful-bg-basic-level-1-default);
	color: var(--db-successful-on-bg-basic-emphasis-100-default);
	padding-inline: var(--db-spacing-fixed-xs);
}
