html {
	scroll-behavior: smooth;
}
body.wp-core-ui.sitemap-generator {

    --csg-theme-color: var( --wp-admin-theme-color, #007CBA );
    --csg-border-color: #DCDCDE;
    --csg-background-color: #FFF;
    --csg-text-color: #3c434a;
    --csg-red: #D53637;
    --csg-orange: #eaa600;
    --csg-blue: var(--csg-theme-color);
    --csg-green: #008a20;}

	& mark {
		background-color: transparent;
		color: currentColor;
		font-weight: normal;
		opacity: 0.6;
	}
	.sitemap-generator-header {
		background: var(--csg-background-color);
    	color: currentColor;
		border-bottom: 1px solid var(--csg-border-color);
		padding-top: 0.5em;
		margin-bottom: 1.14em;
    }
	.sitemap-generator-title {
		display: flex;
		align-items: center;
		gap: 0.5em;
        font-size: 1.2em;
		color: inherit;
		font-weight: 600;
		margin-block: 1.5em 0;
	}
	.nav-tab-wrapper {
		display: flex;
		gap: 1.5em;
		border-bottom: 0;
	}
	.nav-tab-wrapper a {
		display: block;
		text-decoration: none;
		color: inherit;
		font-weight: 500;
		font-size: 1em;
		padding-block: 1em;
		padding-inline: 0;
		&:hover {
			color: var(--csg-theme-color);
		}
		&[aria-current="page"] {
			border-bottom: 2px solid var(--csg-theme-color);
		}
	}
    .sitemap-generator-wrapper {
        max-width: 800px;
        margin-inline: auto;
        padding-inline: 1.14em;
    }
	.noticable-notice {
		background-color: #FCF9E8;
		display: flex;
		align-items: center;
		& p:has( .button ) {
			flex-grow: 1;
			text-align: right;
		}
	}
	.subsubsub {
		float: none;
	}
	.card {
		max-width: unset;
		border-radius: 4px;
		min-width: unset;
	}
	.welcome-card {
		border: 1px solid var(--csg-theme-color);
		box-shadow: 0px 1px 12px rgb( from var(--csg-theme-color) R G B / 0.4 );
	}
	.form-fields {
		display: grid;
		grid-template-columns: repeat( auto-fill, minmax( min( 250px, 100%), 1fr ) );
		gap: 1em;
		padding-block: 1em;
		.form-fields-label {
			font-weight: bold;
		}
		.form-fields-description {
			font-weight: normal;
    		line-height: 1.3;
			color: #646970;
			margin: 0;
		}
		&:has( .toggle-form-fields:not(:checked) ) {
			.form-fields-description {
				opacity: 0.6;
			}
			.form-fields-option {
				display: none;
				content-visibility: hidden;
			}
		}
	}
	.has-clear-button {
		display: grid;
		grid-template-columns: 1fr auto;
		.text {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		.button {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		&:has(:placeholder-shown) .clear-button {
			pointer-events:none;
			filter: grayscale(1);
			opacity: .6;
		}
	}
	& input[type="text"],
	& select,
	& textarea {
		width: min( 100%, 20rem );
		max-width: unset;
	}
	.button.button-blank {
		background-color: transparent;
		border-color: transparent;
		color: #3c434A;
		font-weight: 500;
	}
	p.description svg {
		color: var(--csg-theme-color);
		width: 1lh;
		height: 1lh;
		align-self: center;
	}
	.wrapped-description {
		max-width: 70ch;
	}
	.accordion-group {
		border: 1px solid var(--csg-border-color);
		border-bottom: 0;
	}
	.sitemap-accordion {
		border-bottom: 1px solid var(--csg-border-color);
		& summary {
			background: var(--csg-background-color);
			color: var(--csg-text-color);
			cursor: pointer;
			counter-increment: list-item 0;
    		list-style: inside disclosure-closed;
			font-weight: 600;
			display: flex;
			gap: 1rem;
			align-items: center;
			justify-content: space-between;
			padding: 1em 1.5em;
			position: relative;
		}
		&.type-is-excluded summary {
			background: hsl( from var(--csg-red) h s 98% );
		}
		&.type-is-empty summary {
			background: hsl( from var(--csg-border-color) h s 98% );
			color: rgb( from currentColor r g b / 0.5 );
		}
		& summary .icon {
			border: solid currentColor;
			border-width: 0 2px 2px 0;
			height: .5rem;
			pointer-events: none;
			right: 1.5em;
			rotate: 45deg;
			width: .5rem;
			transition: 0.3s rotate ease-in-out;
		}
		&[open] summary .icon {
			rotate: 225deg;
		}
		& summary .dashicons {
			color: currentColor;
			width: 18px;
			height: 18px;
			font-size: 18px;
			vertical-align: middle;
			margin-right: -0.5rem;
		}
		& summary .title {
			flex-grow: 1;
		}
		& summary .badge {
			--_base: var(--csg-border-color);
			font-weight: 600;
			padding: 0.2rem 0.4rem;
			border-radius: 4px;
			background-color: hsl( from var(--_base) h s 95% );
			color: hsl( from var(--_base) h s 25% );
			border: 1px solid var(--_base);

			&.red {
				--_base: var(--csg-red);
			}
			&.orange {
				--_base: var(--csg-orange);
			}
			&.blue {
				--_base: var(--csg-blue);
			}
			&.green {
				--_base: var(--csg-green);
			}
			&.blank {
				--_base: var(--csg-text-color);
				border: 0;
				background: transparent;
			}
		}
		& table.inactive {
			display: none;
		}
		.panel {
			padding: 1em 1.5em;
			background-color: #FFF;
		}
		.accordion-panel-header {
			background: #FFF;
			position: sticky;
			top: 32px;
			z-index: 10;
		}
		.accordion-panel-footer {
			background: #FFF;
			border-top: 1px solid #c3c4c7;
			position: sticky;
			bottom: 0;
			padding: 1em 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 10;
		}
	}
	.notice {
		margin: 8px 0;
	}
	& table td {
		box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
		padding: 16px;
	}
	& tr:has( select:invalid ) td {
		opacity: 0.3;
	}
	select:invalid {
		background-color: red!important;
	}
	select option[value=""], select option:not([value]) {
		background-color: blue!important;
	}
	.inactive {
		filter: grayscale(1);
		opacity: 0.6;
		text-decoration: line-through;
	}
}