@import '../../lib/base-styles';

.jp-search-configure-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: $grid-unit-60; // Match .components-panel__header height.
	padding: 0 $grid-unit-20;
	overflow: auto;

	@include break-medium() {
		height: $header-height; // Match headers of other editor interfaces.
	}

	@include break-small {
		overflow: visible;
	}
}

.jp-search-configure-header__navigable-toolbar-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

.jp-search-configure-header__title {
	font-size: 20px;
	padding: 0;
	margin: 0 20px 0 0;
}

.jp-search-configure-header__actions {
	display: flex;

	.components-button {
		margin-left: $grid-unit-15;

		&:first-child {
			margin-left: 0;
		}

		&.jp-search-configure-header__show-settings-button {
			display: block;

			@include break-small() {
				margin-right: $grid-unit-10;
			}

			@include break-medium() {
				display: none;
				margin-left: 0;
			}
		}
	}
}