.SwatchCard{--swatch-round: 1rem;padding:0;border-color:var(--theme-base);border-right-width:1px;border-top-left-radius:var(--swatch-round);background:linear-gradient(90deg,var(--swatch-color) 0%,var(--swatch-color) 50%,var(--theme-base) 50%,var(--theme-base) 100%);background-position-y:var(--swatch-round);background-repeat:no-repeat;background-size:100% calc(100% - (var(--swatch-round) * 2));overflow:clip}.SwatchCard__color{position:relative;display:block;aspect-ratio:1/1;width:100%;border-bottom-right-radius:var(--swatch-round);background-color:var(--swatch-color)}.SwatchCard__shadowLayer01:before,.SwatchCard__shadowLayer01:after,.SwatchCard__shadowLayer02:before,.SwatchCard__shadowLayer02:after{--swatch-shadow: rgba(0, 0, 0, .125) -3px -3px 8px -2px;position:absolute;inset:0;width:100%;content:""}.SwatchCard__shadowLayer01:before{background-color:var(--swatch-color);border-bottom-right-radius:var(--swatch-round);box-shadow:var(--swatch-shadow) inset;left:unset}.SwatchCard__shadowLayer01:after{background:linear-gradient(90deg,var(--swatch-color) 0%,transparent 100%)}.SwatchCard__shadowLayer02:before{background-color:var(--theme-base);border-top-left-radius:var(--swatch-round);height:var(--swatch-round);top:100%;bottom:unset;box-shadow:var(--swatch-shadow)}.SwatchCard__shadowLayer02:after{background:linear-gradient(180deg,var(--swatch-color) 0%,transparent calc(100% - var(--swatch-round)))}.SwatchCard__content{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:1.25em .75em .75em;background-color:var(--theme-base);border-top-left-radius:var(--swatch-round)}.SwatchCard__ArchBR{position:absolute;top:0;right:0;translate:0 -100%;font-size:var(--swatch-round);color:var(--theme-base)}.SwatchCopyMessage{--copy-message-timing: .3s;display:flex;align-items:center;gap:.5em;position:fixed;z-index:9999;translate:-50% -100%;box-shadow:var(--shadow);border-radius:var(--round);padding:.5em .6em;background-color:var(--theme-base);font-size:.8rem;pointer-events:none;opacity:0;visibility:hidden;transition-property:opacity,visibility;transition-duration:var(--copy-message-timing),0ms;transition-timing-function:ease-in,linear;transition-delay:0ms,0ms}.SwatchCopyMessage[data-open=true]{opacity:1;visibility:visible;transition-delay:0ms,0ms}.SwatchCopyMessage[data-open=false]{opacity:0;visibility:hidden;transition-delay:0ms,var(--copy-message-timing)}@property --varBox-color{syntax: "<color>"; initial-value: transparent; inherits: true;}@property --varBox-length{syntax: "<length>"; initial-value: 0px; inherits: true;}.VarBox{display:flex;flex-shrink:0;border-width:1px;border-style:solid;border-color:var(--theme-face);border-radius:2px;background-color:var(--varBox-color);min-width:1em;height:1em;overflow:visible}.VarBox:before{flex-shrink:0;margin-top:-1px;margin-bottom:-1px;border-top-width:1px;border-bottom-width:1px;border-style:solid;border-color:var(--theme-base);background-color:currentColor;background:linear-gradient(0deg,currentColor 0%,currentColor 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);min-width:var(--varBox-length);height:calc(1em + 1px);content:""}.List--colorFace>.List__item::marker{color:var(--theme-face)}