.ColorsGroup-module__Z4ITsW__root{--primary-swatch-size:calc(13.75rem * var(--mantine-scale))}.ColorsGroup-module__Z4ITsW__inner{gap:calc(.125rem * var(--mantine-scale));flex-direction:column;display:flex}.ColorsGroup-module__Z4ITsW__primarySwatch{width:100%;height:calc(var(--primary-swatch-size) / 1.5);border-radius:var(--mantine-radius-md);border-bottom-right-radius:0;border-bottom-left-radius:0;transition:background-color .1s,color .1s;position:relative}.ColorsGroup-module__Z4ITsW__swatches{align-items:center;gap:calc(.125rem * var(--mantine-scale));display:flex}.ColorsGroup-module__Z4ITsW__secondarySwatch{width:10%;height:calc(var(--primary-swatch-size) / 10);font-size:var(--mantine-font-size-xs);font-family:var(--mantine-font-family-monospace);text-transform:uppercase}.ColorsGroup-module__Z4ITsW__name{top:calc(.75rem * var(--mantine-scale));text-transform:capitalize;font-family:var(--docs-font-primary);font-weight:600;position:absolute;inset-inline-start:calc(.75rem * var(--mantine-scale))}.ColorsGroup-module__Z4ITsW__colorIndex{top:calc(.75rem * var(--mantine-scale));font-family:var(--docs-font-primary);font-weight:600;position:absolute;inset-inline-end:calc(.75rem * var(--mantine-scale))}.ColorsGroup-module__Z4ITsW__colorValue{bottom:calc(.75rem * var(--mantine-scale));text-transform:uppercase;font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-sm);position:absolute;inset-inline-end:calc(.75rem * var(--mantine-scale))}