/* Widgets - Table - Sortable Icon */
////
/// @group Widgets-Table-Sortable_Icon
/// Widgets - Table - Sortable Icon

///
.sortable-icon {
	display: inline-block;
	height: 11px;
	margin-left: var(--space-s);
	position: relative;
	width: 10px;

	&:before,
	&:after {
		border-left: 4px solid get-border-color('transparent');
		border-right: 4px solid get-border-color('transparent');
		content: '';
		left: 0;
		position: absolute;
	}

	&:before {
		border-bottom: 4px solid get-border-color('neutral-8');
	}

	&:after {
		border-top: 4px solid get-border-color('neutral-8');
		bottom: 0;
	}
}

///
.table-header {
	th.sorted {
		.sortable-icon {
			&:before {
				border-bottom: 4px solid get-border-color('primary');
			}

			&:after {
				border-top: 4px solid get-border-color('primary');
			}
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.desktop {
	.table-header {
		th.sortable:hover {
			.sortable-icon {
				&:before {
					border-bottom: 4px solid get-border-color('primary');
				}

				&:after {
					border-top: 4px solid get-border-color('primary');
				}
			}
		}
	}
}