.playground__config__download-btn {
	margin: 1rem 0.5rem 1rem 0;
}

[data-config-section] {
	margin-top: 1rem;
}

[data-config-section-title] {
	font-size: 0.875rem;
	font-family: var(--text-font);
	color: inherit;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;

	.config-js & {
		margin: 0;
	}
}

.playground-toggle {
	border: none;
	display: flex;
	width: 100%;
	padding: 0;
	justify-content: space-between;
}

[data-config-section-toggle] {
	cursor: pointer;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-family: var(--text-font);
	color: inherit;
	color: var(--color-neutral-700);
	font-weight: 400;
	line-height: 1.5;
	padding: 0;

	[data-theme="dark"] & {
		color: var(--color-neutral-100);
	}

	&[aria-expanded="true"] {
		margin-bottom: 0.5rem;
	}

	.title-toggle &[aria-expanded="true"] {
		margin-bottom: 1rem;
		color: var(--body-text-color);
	}
}

.playground__config-toggle {
	cursor: pointer;
	display: flex;
	width: 100%;
	padding: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-weight: 500;
	color: var(--link-color);

	&:hover {
		color: var(--link-color);
	}

	svg {
		width: 1.5em;
		height: 1.5em;
		color: var(--color-neutral-400);
		fill: none;
		stroke-width: 4;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	#ham-top,
	#ham-middle,
	#ham-bottom {
		transition: all 0.2s linear;
	}

	#ham-top {
		transform-origin: 30px 37px;
	}

	#ham-bottom {
		transform-origin: 30px 63px;
	}

	&[aria-expanded="true"] {
		#ham-middle {
			opacity: 0;
		}

		#ham-top {
			transform: rotate(41deg);
		}

		#ham-bottom {
			transform: rotate(-41deg);
		}
	}
}

.playground__config-options {
	position: relative;
	z-index: 30;
	background-color: var(--body-background-color);

	&[data-open="false"] {
		display: none;

		@media all and (min-width: 1023px) {
			display: flex;
		}
	}

	&[data-open="true"] {
		display: flex;

		@media all and (min-width: 1023px) {
			display: flex;
		}
	}
}

.playground__config-options__section {
	border-bottom: 1px solid var(--divider-color);
	padding: 1rem;
}

/* Styles for the accordion icon */
.config-js .config-icon {
	display: block !important;
	width: 0.75rem;
	height: 0.5rem;
	margin-right: 0.5rem;
	margin-inline-end: 0.5rem;
	transform-origin: 50% 50%;
	transition: all 0.1s linear;
	color: inherit;
}

.playground__config-and-footer {
	scrollbar-gutter: stable;
}

.config-js [aria-expanded="true"] .config-icon {
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

// share URL section
.share-url-wrapper {
	position: relative;
}

.share-url {
	display: flex;
	align-items: center;
	gap: 1rem;
	background-color: var(--lightest-background-color);
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
	padding-right: calc(0.625rem + 20px);
	max-width: 100%;
	color: var(--headings-color);
	position: relative;

	[data-theme="dark"] & {
		background-color: var(--color-neutral-700);
	}

	code {
		color: var(--headings-color);
	}

	input {
		all: unset;
		flex-grow: 1;
		color: inherit;
		padding: 0.625rem 0.625rem 0.625rem 0.875rem;
		white-space: nowrap;
		overflow-x: auto;
		overflow: hidden;

		&::selection {
			background-color: var(--color-brand);
			color: #fff;
		}
	}
}

.share-url__btn {
	padding: 0;
	position: absolute;
	right: 0.625rem;
	top: 50%;
	transform: translateY(-50%);

	.c-icon {
		color: var(--body-text-color);
	}

	&:hover,
	&:focus,
	&:active {
		.c-icon {
			color: var(--link-color);
		}
	}

	&[data-copied="true"] {
		.c-icon {
			color: var(--link-color);
		}
	}
}

.share-url__announcement {
	padding: 0.25rem 0.75rem;
	font-size: 0.875rem;
	font-size: var(--step--1);
	display: block;
	margin-top: 0.5rem;
	transition: opacity 1s linear 3s;

	&:empty {
		margin: 0;
		padding: 0;
	}

	&[data-fades-out] {
		opacity: 0;
	}
}

.report-issue-wrapper {
	margin-top: 1rem;
}

.playground__config-options__section--rules {
	font-size: 0.875rem;
}

.rules-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;

	&:has(> :nth-child(1):last-child) {
		justify-content: flex-end;
	}
}

.add-rule-btn {
	color: var(--link-color);
	margin: 1rem 0;
	margin-block-start: 1rem;
	border: none;
	padding: 0;
	font-size: inherit;
	border-radius: 0;
}

ul.config__added-rules {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--mono-font);

	li {
		margin: 0 0 1rem;

		&:last-of-type {
			margin: 0;
		}
	}
}

.config__added-rules__item {
	padding: 0 0.25rem;
}

.config__added-rules__rule-name {
	font: inherit;
	margin: 0 0 0.25rem;
	display: flex;
	justify-content: space-between;
}

.config__added-rules__rule-content {
	padding: 0.625rem 0.875rem;
	box-shadow: var(--shadow-xs);
	border: 1px solid var(--border-color);
	color: var(--headings-color);
	border-radius: var(--border-radius);
}

.config__added-rules__rule-error {
	color: var(--color-rose-800);
	margin-top: 0.75rem;

	[data-theme="dark"] & {
		color: var(--color-rose-400);
	}
}

.config__added-rules__rule-input-error {
	border-color: var(--color-rose-700);
	box-shadow: 0 0 0 2px var(--color-rose-700);
	background-color: var(--color-rose-100);

	&:focus {
		border-color: var(--color-rose-700);
		box-shadow: 0 0 0 2px var(--color-rose-700);
	}

	[data-theme="dark"] & {
		background-color: transparent;
		border-color: var(--color-rose-700);
	}
}
