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

.editor-global-styles-sidebar {
	display: flex;
	flex-direction: column;
	min-height: 100%;

	&__panel {
		flex: 1;
	}
}

.editor-global-styles-sidebar .editor-global-styles-sidebar__header-title {
	margin: 0;
}

.editor-global-styles-sidebar .editor-global-styles-sidebar__header-actions {
	flex: 1;
}

.editor-global-styles-sidebar .components-navigation__menu-title-heading {
	font-size: $default-font-size * 1.2;
	font-weight: $font-weight-medium;
}

.editor-global-styles-sidebar .components-navigation__item > button span {
	font-weight: $font-weight-medium;
}

.editor-global-styles-sidebar .block-editor-panel-color-gradient-settings {
	border: 0;
}

.editor-global-styles-sidebar .single-column {
	grid-column: span 1;
}

.editor-global-styles-sidebar .components-tools-panel .span-columns {
	grid-column: 1 / -1;
}

.editor-global-styles-sidebar__blocks-group {
	padding-top: $grid-unit-30;
	border-top: $border-width solid $gray-200;
}

.editor-global-styles-sidebar__blocks-group-help {
	padding: 0 $grid-unit-20;
}

.global-styles-ui-color-palette-panel,
.global-styles-ui-gradient-palette-panel {
	padding: $grid-unit-20;
}

// Override the `hr` styles defined in the `ComplementaryArea` component
// from the `@wordpress/interface` package.
.editor-global-styles-sidebar hr {
	margin: 0;
}

.show-icon-labels {
	.editor-global-styles-sidebar__header {
		.components-button.has-icon {
			width: auto;

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

.editor-welcome-guide {
	width: 312px;

	&.guide-styles .editor-welcome-guide__image {
		background: #00a0d2;
	}

	&__image {
		margin: 0 0 $grid-unit-20;
		> img {
			display: block;
			max-width: 100%;
			object-fit: cover;
		}
	}

	&__heading {
		font-family: $default-font;
		font-size: 24px;
		line-height: 1.4;
		margin: $grid-unit-20 0 $grid-unit-20 0;
		padding: 0 $grid-unit-40;
	}

	&__text {
		font-size: $default-font-size;
		line-height: 1.4;
		margin: 0 0 $grid-unit-20 0;
		padding: 0 $grid-unit-40;

		img {
			vertical-align: bottom;
		}
	}
	.components-button {
		&:hover {
			svg {
				fill: $white;
			}
		}
	}
}