Iosevka/shared/styles-scss/page-parts/ligation-sampler.scss

@use "sass:color";
@use "../shared/chroma.scss";
@use "../shared/switch-button.scss";
@use "../shared/sampler-panel.scss";
@use "../shared/metrics.scss";
@use "../shared/tools-panels-t.scss";

.ligation-sampler-body {
	@media (max-width: metrics.sectionTotalWidthChars(64, 1rem)) {
		display: none;
	}
	.panel {
		min-height: 12rem;
	}
	.panel.usage {
		flex: 1;
	}
	.panel.ligation-set-switches {
		> .switches {
			flex: 1;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			> .switch {
				display: block;
				box-sizing: border-box;
				padding: 0.5em;
				flex-grow: 0;
				flex-shrink: 0;
				width: 16.667%;
				@include switch-button.block-switch-button();
				&.off > .tag {
					text-decoration: line-through;
					text-decoration-thickness: 0.05em;
				}
			}
		}
	}
	> .picker-frame {
		@include sampler-panel.sampler-panel-right();

		@media (max-width: metrics.sectionTotalWidthChars(70, 1rem)) {
			.button-group.weight {
				display: none;
			}
		}

		@media (max-width: metrics.sectionTotalWidthChars(48, 1rem)) {
			.button-group.slope {
				display: none;
			}
		}
	}
	.sample-text-list {
		overflow-x: auto;
	}
	.sample-text {
		width: 0;
		font-size: 1.8rem;
		.rank-0 {
			color: color.mix(chroma.$light1, chroma.$dark1, 25%);
		}
		.rank-2,
		.rank-3 {
			color: chroma.$accent1;
		}
	}
}