//
// Mixins
// --------------------------------------------------

@mixin compact {
	$selector: &;
	@at-root [zoteroUIDensity="compact"] {
		@if $selector {
			#{$selector} {
				@content;
			}
		}
		
		@else {
			@content;
		}
	}
}

@mixin comfortable {
	$selector: &;
	@at-root [zoteroUIDensity="comfortable"] {
		@if $selector {
			#{$selector} {
				@content;
			}
		}

		@else {
			@content;
		}
	}
}

// @NOTE: this mixin uses `state` mixin, therefore must be used in a selector nested
//        underneath selectors listed in arguments, e.g., .virtualized-table .row 
//        by default. See `state` mixin for more details.
@mixin focus-states(
	$selectedState: '.row.selected',
	$focused: '.virtualized-table:focus-within'
	) {
	@media (prefers-color-scheme: light) {
		@content("light");
		
		@include state($selectedState) {
			@include state($focused) {
				@content("white");
			}
		}
	}

	@media (prefers-color-scheme: dark) {
		@content("dark");
		
		@include state($selectedState) {
			@include state($focused) {
				@content("white");
			}
		}
	}
}

// An implementation of Firefox light-dark() CSS mixin, which is not supported in 102
@mixin light-dark($prop, $light-color, $dark-color) {
	@media (prefers-color-scheme: light) {
		#{$prop}: $light-color;
	}
	@media (prefers-color-scheme: dark) {
		#{$prop}: $dark-color;
	}
}

@mixin color-scheme {
	@media (prefers-color-scheme: light) {
		@content("light");
	}
	
	@media (prefers-color-scheme: dark) {
		@content("dark");
	}
}

@mixin clicky-item {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	padding-inline-start: 4px;
	overflow: hidden;

	&:hover {
		border-radius: 5px;
		background-color: var(--fill-quinary);
	}

	.label {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 10;
		width: 0; // Needed to allow the label to shrink for some reason
		flex: 1;
		overflow: hidden;
		line-height: 16px;
	}
	
	@include comfortable {
		.icon, .label {
			padding-block: 2px;
		}
	}
}