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

	label {
		@include reset-typography();
		@include font-size(16px, 22px);
		position: absolute;
		transform: translateY(0.75em);
		transform-origin: top left;
		transition: all 200ms ease;
		color: $gray-50;
		z-index: 1;
		margin: 0 0 0 #{$gap + 1px};
		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 {
		@include font-size(16px);
		background-color: #fff;
		box-shadow: none;
		color: $input-text-active;
		font-family: inherit;
		font-weight: normal;
		height: rem(48px);
		letter-spacing: inherit;
		line-height: 1;
		overflow: hidden;
		padding: rem($gap-large) $gap rem($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__button-icon {
		right: #{$gap - 4px};
	}

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

		// Required by IE11.
		&:empty {
			display: none;
		}
	}

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

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