[data-swatch-container]{--swatch-height: 112px;--swatch-width: 24px;--swatch-border-width: 3px;--transition-duration: .8s;--hinge-size: calc(var(--swatch-width) - (var(--swatch-border-width) * 2));--hinge-radius: calc(var(--hinge-size) / 2);--pivot-ammount: 30deg;--pivot-offset: calc(var(--swatch-border-width) + var(--hinge-radius));--hit-area: calc(var(--swatch-width) / 100 * 50);position:relative;height:var(--swatch-height);width:var(--swatch-width)}@media (prefers-reduced-motion: reduce){[data-swatch-container]{--transition-duration: 0ms}[data-swatch-container] [data-swatch-item],[data-swatch-container] [data-swatch-item] [data-swatch-item-card]{transition:none}}[data-swatch-group]{position:relative;box-sizing:border-box;height:var(--swatch-height);width:var(--swatch-width)}[data-swatch-item]{--angle: calc(var(--index) * var(--pivot-ammount) * -1);position:absolute;height:var(--swatch-height);width:var(--swatch-width);transform-origin:50% calc(100% - var(--pivot-offset));transition:transform var(--transition-duration) var(--ease-spring),opacity .1s ease-in-out;cursor:pointer;will-change:transform;z-index:1;box-sizing:border-box;outline:none;opacity:1}[data-swatch-group]:focus-visible,[data-swatch-item]:focus-visible{box-shadow:none}[data-swatch-group]:hover [data-swatch-item],[data-swatch-group]:focus-within [data-swatch-item]{transform:rotate(var(--angle))}[data-swatch-item] [data-swatch-item-card]{border-radius:calc(var(--swatch-width) / 2);outline:var(--swatch-border-width) solid #ffffff;background:hsl(var(--hue) var(--saturation-primary) var(--lightness-primary));height:100%;width:100%;transform:scaleY(1);transform-origin:bottom center;transition:transform var(--transition-duration) var(--ease-spring);box-sizing:border-box}[data-swatch-item]:hover [data-swatch-item-card],[data-swatch-item]:focus-visible [data-swatch-item-card]{transform:scaleY(1.12);transition:transform calc(var(--transition-duration) / 1.6) var(--ease-spring)}[data-swatch-group]:not(:hover):not(:focus-visible):not(:focus-within) [data-swatch-item]:not(.is-active){opacity:0;transition:transform var(--transition-duration) var(--ease-spring),opacity .2s .25s ease-in-out}[data-swatch-item].is-active{z-index:10}[data-swatch-item].is-active [data-swatch-item-card]{--active-color-adjustment: 26%;outline-color:hsl(var(--hue),calc(var(--saturation-primary) + var(--active-color-adjustment)),calc(var(--lightness-primary) - var(--active-color-adjustment)))}[data-swatch-item] [data-swatch-item-card]:before{content:"";position:absolute;display:block;border-radius:999px;inset:calc(var(--hit-area) * -1)}[data-swatch-item-hinge]{position:absolute;display:block;background:var(--color-clay-100);border-radius:50%;left:50%;transform:translate(-50%);z-index:1000;inline-size:var(--hinge-size);block-size:var(--hinge-size);bottom:var(--swatch-border-width)}