.wc-block-select {
	height: 48px;
	position: relative;
	margin-bottom: $gap-large;

	label {
		position: absolute;
		transform: translateY(#{$gap-small});
		transform-origin: top left;
		transition: all 200ms ease;
		font-size: 16px;
		line-height: 22px;
		color: $gray-50;
		z-index: 1;
		margin: 0 $gap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: calc(100% - #{  2 * $gap });
		white-space: nowrap;

		@media screen and (prefers-reduced-motion: reduce) {
			transition: none;
		}
	}

	&.is-active label {
		transform: translateY(#{$gap-smallest}) scale(0.75);
	}

	&.has-error {
		.components-custom-select-control__button {
			border-color: $error-red;
		}
	}

	&.has-error label {
		color: $error-red;
	}

	.components-custom-select-control__button {
		background-color: #fff;
		box-shadow: none;
		color: $input-text-active;
		font-family: inherit;
		font-size: 16px;
		font-weight: normal;
		height: 48px;
		letter-spacing: inherit;
		line-height: 1;
		overflow: hidden;
		padding: $gap-large $gap $gap-smallest;
		text-overflow: ellipsis;
		text-transform: none;
		white-space: nowrap;
		width: 100%;

		&:hover,
		&:focus,
		&:active {
			background-color: #fff;
			text-decoration: none;
		}
	}

	.components-custom-select-control__menu {
		background-color: #fff;
		margin: 0;
		max-height: 300px;
		overflow: auto;
	}

	.components-custom-select-control__item {
		font-size: 16px;
		margin-left: 0;
		padding-left: $gap;
	}

	.components-custom-select-control__item-icon {
		display: none;
	}
}