.components-custom-select-control {
	position: relative;
}

.components-custom-select-control__label {
	display: block;
	margin-bottom: $grid-unit-10;
}

.components-custom-select-control__button {
	border: 1px solid $gray-700;
	border-radius: $radius-block-ui;
	min-height: 30px;
	min-width: 130px;
	position: relative;
	text-align: left;

	// For all button sizes allow sufficient space for the
	// dropdown "arrow" icon to display.
	&.components-custom-select-control__button {
		padding-right: $icon-size;
	}

	&:focus:not(:disabled) {
		border-color: var(--gc-admin-theme-color);
		box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--gc-admin-theme-color);
	}

	.components-custom-select-control__button-icon {
		height: 100%;
		padding: 0;
		position: absolute;
		right: 0;
		top: 0;
	}
}

.components-custom-select-control__menu {
	// Hide when collapsed.
	&[aria-hidden="true"] {
		display: none;
	}

	// Block UI appearance.
	border: $border-width solid $gray-900;
	background-color: $white;
	border-radius: $radius-block-ui;
	outline: none;
	transition: none;

	max-height: 400px;
	min-width: 100%;
	overflow: auto;
	padding: 0;
	position: absolute;
	z-index: z-index(".components-popover");
}

.components-custom-select-control__item {
	align-items: center;
	display: grid;
	grid-template-columns: auto auto;
	list-style-type: none;
	padding: $grid-unit-10;
	cursor: default;
	line-height: $icon-size + $grid-unit-05;

	&.has-hint {
		grid-template-columns: auto auto 30px;
	}
	&.is-highlighted {
		background: $gray-300;
	}
	.components-custom-select-control__item-hint {
		color: $gray-700;
		text-align: right;
		padding-right: $grid-unit-05;
	}
	.components-custom-select-control__item-icon {
		margin-left: auto;
	}

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