@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;

.edit-site-sidebar-navigation-screen {
	display: flex;
	flex-direction: column;
	overflow-x: unset !important;
	position: relative;
}

.edit-site-sidebar-navigation-screen__main {
	// Ensure the sidebar is always at least as tall as the viewport.
	// This allows the footer section to be sticky at the bottom of the viewport.
	flex-grow: 1;
	margin-bottom: $grid-unit-20;
	&.has-footer {
		margin-bottom: 0;
	}
}

.edit-site-sidebar-navigation-screen__content {
	padding: 0 $grid-unit-20;

	.components-text {
		color: var(--wpds-color-foreground-content-neutral);
	}

	.components-heading {
		margin-bottom: $grid-unit-10;
	}
}

.edit-site-sidebar-navigation-screen__title-icon {
	position: sticky;
	top: 0;
	background: var(--wpds-color-background-surface-neutral-weak);
	padding-top: $grid-unit-40;
	margin-bottom: $grid-unit-10;
	padding-bottom: $grid-unit-10;
	// Title needs to appear above other UI in the section content.
	z-index: 1;
}

.edit-site-sidebar-navigation-screen__title {
	flex-grow: 1;
	overflow-wrap: break-word;

	&#{&},
	&#{&} .edit-site-sidebar-navigation-screen__title {
		line-height: $font-line-height-x-large;
	}
}

.edit-site-sidebar-navigation-screen__actions {
	display: flex;
	flex-shrink: 0;
}

.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
	@include break-medium() {
		// Safari does not currently support `scrollbar-gutter: stable`, so at
		// particular viewport sizes it's possible for previews to render prior to a
		// scrollbar appearing. This then causes a scrollbar to appear, which reduces
		// the width of the container and can cause the preview's width to change.
		// As a result, the preview can go into an endless loop of resizing, causing
		// the preview elements to appear to "dance". A workaround is to provide a
		// max-width for the container, which prevents the introduction of the scrollbar
		// from causing the preview's width to change.
		// See: https://github.com/WordPress/gutenberg/issues/55112
		max-width: 292px;
	}
}

.edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item {

	// Use a white outline to provide contrast with the dark background.
	.global-styles-ui-variations_item-preview {
		outline-color: rgba($white, 0.05);
	}

	&:not(.is-active):hover .global-styles-ui-variations_item-preview {
		outline-color: rgba($white, 0.15);
	}

	&.is-active .global-styles-ui-variations_item-preview {
		outline-color: $white;
	}

	&:focus-visible .global-styles-ui-variations_item-preview {
		outline-color: var(--wp-admin-theme-color);
	}
}

.edit-site-sidebar-navigation-screen__footer {
	position: sticky;
	bottom: 0;
	background-color: var(--wpds-color-background-surface-neutral-weak);
	gap: 0;
	padding: $grid-unit-10 $grid-unit-20;
	margin: $grid-unit-20 0 0;
	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);

	.edit-site-sidebar-navigation-screen-details-footer {
		margin-left: -$grid-unit-20;
		margin-right: -$grid-unit-20;
	}
}

/* In general style overrides are discouraged.
 * This is a temporary solution to override the InputControl component's styles.
 * The `Theme` component will potentially be the more appropriate approach
 * once that component is stabilized.
 * See: packages/components/src/theme
 */
.edit-site-sidebar-navigation-screen__input-control {
	width: 100%;
	.components-input-control__container {
		background: var(--wpds-color-background-interactive-neutral-weak);

		.components-button {
			color: var(--wpds-color-foreground-interactive-neutral) !important;
		}
	}
	.components-input-control__input {
		color: var(--wpds-color-foreground-interactive-neutral) !important;
		background: var(--wpds-color-background-interactive-neutral-weak) !important;
	}
	.components-input-control__backdrop {
		border: 4px !important;
	}
	.components-base-control__help {
		color: var(--wpds-color-foreground-content-neutral-weak);
	}
}