:root {
	--eps-sort-select-select-background-color: #{tints(100)};
	--eps-sort-select-select-color: #{tints(700)};
	--eps-sort-select-button-background-color: #{tints(100)};
	--eps-sort-select-button-border: #{1px solid $eps-border-color};
}

.eps-theme-dark {
	--eps-sort-select-select-background-color: #{$eps-dark-gray-600};
	--eps-sort-select-select-color: #{$eps-dark-gray-200};
	--eps-sort-select-button-background-color: #{$eps-dark-gray-600};
	--eps-sort-select-button-border: #{1px solid $eps-dark-gray-800};
}

.eps-sort-select {
	width: 100%;
	font-size: type(size, "15");
	display: flex;

	&__select-wrapper {
		flex: 1;
		position: relative;

		&::after {
			content: "\e8ad";
			font-family: eicons;
			position: absolute;
			@include end( spacing( 10 ) );
			top: 0;
			bottom: 0;
			color: tints(500);
			display: flex;
			align-items: center;
			justify-content: center;
			pointer-events: none;
		}
	}

	&__select {
		width: 100%;
		padding: spacing(10) spacing(10);
		border: none;
		background: var(--eps-sort-select-select-background-color);
		outline: none;
		color: var(--eps-sort-select-select-color);
		line-height: type( line-height, 'flat' );
		cursor: pointer;
		height: spacing(44);
		appearance: none;
		-webkit-appearance:none;
		border-radius: 0;
	}

	&__button {
		padding: spacing(12) spacing(12);
		background: var(--eps-sort-select-button-background-color);
		@include border-start( var(--eps-sort-select-button-border) );
		line-height: type( line-height, 'flat' );
		color: tints(500);
	}
}
