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

.components-panel__header.jp-search-configure-sidebar__panel-tabs {
	justify-content: flex-start;
	padding-left: 0;
	padding-right: $grid-unit-05;
	border-top: 0;
	margin-top: 0;

	ul {
		display: flex;
	}
	li {
		margin: 0;
	}
	.components-button.has-icon {
		display: none;
		margin-left: auto;

		@include break-medium() {
			display: flex;
		}
	}
}

.components-button.jp-search-configure-sidebar__panel-tab {
	border-radius: 0;
	height: 50px - $border-width;
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: pointer;
	display: inline-block;
	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
	margin-left: 0;
	font-weight: 400;
	color: $gray-900;

	// This pseudo-element "duplicates" the tab label and sets the text to bold.
	// This ensures that the tab doesn't change width when selected.
	// See: https://github.com/WordPress/gutenberg/pull/9793
	&::after {
		content: attr( data-label );
		display: block;
		font-weight: 600;
		height: 0;
		overflow: hidden;
		speak: none;
		visibility: hidden;
	}

	&.is-active {
		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
		box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) transparent,
			inset 0 0 -$border-width-tab 0 0 var( --wp-admin-theme-color );
		font-weight: 600;
		position: relative;

		// This border appears in Windows High Contrast mode instead of the box-shadow.
		&::before {
			content: '';
			position: absolute;
			top: 0;
			bottom: 1px;
			right: 0;
			left: 0;
			border-bottom: $border-width-tab solid transparent;
		}
	}

	&:focus {
		box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
	}

	&.is-active:focus {
		box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color ),
			inset 0 0 -$border-width-tab 0 0 var( --wp-admin-theme-color );
	}
}

.jp-search-configure-sidebar-description {
	display: flex;
	padding: $grid-unit-20;
	.block-editor-block-icon {
		margin-right: $grid-unit-20;
	}
}

.jp-search-configure-sidebar-options {
	.components-base-control {
		margin-bottom: $grid-unit-30;

		&.components-checkbox-control,
		&.components-toggle-control {
			margin-bottom: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	.components-checkbox-control__label {
		vertical-align: baseline;
	}
}

.jp-search-configure-result-format-radios {
	margin-bottom: 1em;
}

.jp-search-configure-sidebar-options .jp-search-configure-theme-buttons {
	display: flex;
	justify-content: space-around;
	margin-bottom: $grid-unit-15;

	button.components-button {
		display: flex;
		height: initial;
		flex-direction: column;

		padding-left: $grid-unit * 0.75;
		padding-right: $grid-unit * 0.75;

		&:first-child {
			margin-right: $grid-unit-05;
		}
		&:last-child {
			margin-left: $grid-unit-05;
		}

		svg {
			border: 2px solid $white;
			border-radius: 3px;
			margin-bottom: $grid-unit-05;
		}
		&.jp-search-configure-theme-button--selected svg {
			border-color: $gray-800;
		}
	}
}

.jp-search-configure-sidebar-options--is-disabled {
	input {
		pointer-events: none;
		cursor: not-allowed;
	}

	input[type='checkbox'],
	input[type='radio'] {
		background: $gray-300;
		border-color: $gray-300;
	}

	.components-radio-control__input[type='radio']:checked {
		background: $gray-400;
		border-color: $gray-400;
	}
}

.components-checkbox-control__input:disabled {
	background: $gray-300;
	border-color: $gray-300;
	cursor: not-allowed;
}