@use '../../design/scss/_variables.scss' as *;
@use '../../design/scss/_mixins.scss';
@use '../../design/scss/_placeholders.scss';

.adpresso-th__sort {
	margin-left: auto;
	@include mixins.flex-center;
	width: 22px;
	height: 22px;
	border: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
	padding: 0;

	&:focus-visible {
		box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-icon;
		outline: none;
	}

	.adpresso-th__chevrons {
		position: relative;
		width: 10px;
		height: 16px;
		transform: scale(1.4);

		.chev {
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 0;
			height: 0;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;

			&.up {
				top: 0;
				border-bottom: 6px solid $color-text-grey;
			}

			&.down {
				bottom: 0;
				border-top: 6px solid $color-text-grey;
			}
		}
	}

	&:hover .chev.up {
		border-bottom-color: $color-icon;
	}

	&:hover .chev.down {
		border-top-color: $color-icon;
	}

	&.is-sorted.asc .chev.up {
		border-bottom-color: $color-teal-darkest;
	}

	&.is-sorted.desc .chev.down {
		border-top-color: $color-teal-darkest;
	}
}