/** @format */

.woocommerce-page .woocommerce-dropdown-button {
	background-color: $studio-white;
	position: relative;
	border: 1px solid $core-grey-light-500;
	color: $core-grey-dark-500;
	border-radius: 4px;
	padding: 0 40px 0 0;
	width: 100%;

	&::after {
		content: '';
		background: transparent url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 0 top 55%;
		position: absolute;
		right: 14px;
		width: 32px;
		height: 48px;
		@include animate-transform;
	}

	&.is-open {
		&::after {
			transform: translateX(12px) translateY(2px) rotate(180deg);
		}
	}

	&:hover,
	&:active,
	&.is-open {
		background-color: $core-grey-light-100;
	}

	&.components-button:focus:not(:disabled) {
		border-color: $studio-woocommerce-purple-60;
		box-shadow: 0 0 2px rgba($studio-woocommerce-purple-60, 0.8);
	}

	&.is-multi-line .woocommerce-dropdown-button__labels {
		flex-direction: column;
	}

	&:not(:focus):not(.is-open) {
		border-color: $core-form-grey;
	}
}

.woocommerce-dropdown-button__labels {
	text-align: left;
	padding: 8px 12px;
	min-height: 48px;
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-around;

	@include breakpoint( '<400px' ) {
		min-height: 46px;
	}

	span {
		width: 100%;
		text-align: left;

		&:last-child {
			@include font-size( 12 );
			margin: 0;
		}

		&:first-child {
			@include font-size( 13 );
			font-weight: 600;
		}

		@include breakpoint( '<400px' ) {
			&:last-child {
				@include font-size( 10 );
			}

			&:first-child {
				@include font-size( 12 );
			}
		}
	}
}