1.colorswatch {
2  display: inline-block;
3  vertical-align: top;
4  margin: 0.3rem;
5
6  /* sizes etc. as CSS variables */
7  --tiny-height: 1;
8  --tiny-width: 2;
9  --small-height: 4;
10  --small-width: 6;
11  --middle-height: 6;
12  --middle-width: 8;
13  --large-height: 8;
14  --large-width: 10;
15
16  --ratio: 0.66;
17}
18
19.colorswatch.colorswatch_tiny {
20  min-height: calc(var(--tiny-height) * 1rem);
21  min-width: calc(var(--tiny-width) * 1rem);
22}
23
24.colorswatch.colorswatch_tiny .colorswatch_swatch {
25  height: calc(var(--ratio) * var(--tiny-height) * 1rem);
26}
27
28.colorswatch.colorswatch_small {
29  min-height: calc(var(--small-height) * 1rem);
30  min-width: calc(var(--small-width) * 1rem);
31}
32
33.colorswatch.colorswatch_small .colorswatch_swatch {
34  height: calc(var(--ratio) * var(--small-height) * 1rem);
35}
36
37.colorswatch.colorswatch_middle {
38  min-height: calc(var(--middle-height) * 1rem);
39  min-width: calc(var(--middle-width) * 1rem);
40}
41
42.colorswatch.colorswatch_middle .colorswatch_swatch {
43  height: calc(var(--ratio) * var(--middle-height) * 1rem);
44}
45
46.colorswatch.colorswatch_large {
47  min-height: calc(var(--large-height) * 1rem);
48  min-width: calc(var(--large-width) * 1rem);
49}
50
51.colorswatch.colorswatch_large .colorswatch_swatch {
52  height: calc(var(--ratio) * var(--large-height) * 1rem);
53}
54
55.colorswatch .colorswatch_swatch {
56  width: 100%;
57  border-radius: 0.3rem;
58}
59
60.colorswatch .colorswatch_info {
61  width: 100%;
62  height: 34%;
63  font-size: 85%;
64  text-align: center;
65  padding: 0.3rem 0 0;
66}
67