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

.edit-site-styles {
	.global-styles-ui-screen-root {
		box-shadow: none;
		& > div > hr {
			display: none;
		}
	}
	.global-styles-ui-sidebar__navigator-provider {
		.components-tools-panel {
			border-top: none;
		}
		overflow-y: auto;
		padding-left: 0;
		padding-right: 0;

		.global-styles-ui-sidebar__navigator-screen {
			padding: $grid-unit-15;
			outline: none;

			.global-styles-ui-color-palette__tablist-container {
				margin-inline: -$grid-unit-15;
				width: calc(100% + #{$grid-unit-15 * 2});
				padding-inline: $grid-unit-15;
			}
		}
	}
	.edit-site-sidebar-button {
		color: var(--wpds-color-foreground-interactive-neutral);
	}
}

.edit-site-styles__content {
	flex-grow: 1;
	min-height: 0;
	background-color: var(--wpds-color-background-surface-neutral-strong);
}

// Show button text labels when preference is enabled.
.show-icon-labels {
	.edit-site-styles__header-actions {
		.components-button.has-icon {
			width: auto;
			padding: 0 var(--wpds-dimension-padding-xs);

			// Hide the button icons when labels are set to display...
			svg {
				display: none;
			}
			// ... and display labels.
			&::after {
				content: attr(aria-label);
				font-size: var(--wpds-typography-font-size-sm);
			}
		}
	}
}