@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

// SelectSortBy styles

$tc-list-toolbar-order-chooser-icon-size: 0.375rem !default;

.tc-list-toolbar-sort-by {
	display: flex;
	align-items: center;

	:global(.navbar-btn.btn) {
		color: tokens.$coral-color-neutral-text-weak;
		font-size: 1em;
		margin: 0;
	}

	:global(.tc-list-toolbar-order-chooser) {
		background-color: tokens.$coral-color-neutral-background-medium;
		color: tokens.$coral-color-neutral-text;
		display: inherit;

		padding: 0;

		&:hover,
		&:focus,
		&:active {
			color: tokens.$coral-color-neutral-text;
			box-shadow: none;
		}

		:global(.tc-order-indicator) {
			width: $tc-list-toolbar-order-chooser-icon-size;
			height: $tc-list-toolbar-order-chooser-icon-size;
		}

		.tc-list-toolbar-order-indicator {
			width: $tc-list-toolbar-order-chooser-icon-size;
			height: $tc-list-toolbar-order-chooser-icon-size;

			&.asc {
				transform: rotate(180deg);
			}
		}
	}
}