Iosevka/shared/styles-scss/page-parts/character-variants-sampler.scss

@use "sass:math";

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

.character-variant-sampler-body {
	@media (max-width: metrics.sectionTotalWidthChars(64, 1rem)) {
		display: none;
	}
	.picker-frame > .sample-code {
		overflow-x: auto;
	}
	.panel {
		min-height: 22em;
	}
	.panel.ss {
		flex: 5;
		> .groups {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.option {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			width: calc(100% / 3 - 0.5em);
			flex-grow: none;
			height: 3.125em;
			padding: 0.25em;
			@include switch-button.block-switch-button();
			&.default {
				margin-right: calc(100% / 3 * 2);
			}
		}
		@media (max-width: metrics.sectionTotalWidthChars(96, 1rem)) {
			.option {
				width: calc(100% / 2 - 0.5em);
			}
		}
	}

	.panel.cv {
		flex: 13;
		margin-left: 1rem;
		> .groups {
			display: flex;
			flex-wrap: wrap;
		}
	}
	.panel.usage {
		flex: 1;
	}
	> .preview .sample-code {
		font-size: 1.6em;
		line-height: 1.25em;
	}
}