.color-swatch-container{position:relative;display:flex;flex-direction:row;width:100%;height:-moz-fit-content;height:fit-content}.color-swatch{position:relative;width:1.375rem;height:1.375rem;border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #ffffff;background:linear-gradient(135deg,var(--color) 50%,var(--color-alt) calc(50% + 1px));cursor:pointer;outline:1px solid transparent!important;transition:.3s ease;transition-property:outline-color,background-color;margin:0 .5rem .5rem 0}.color-swatch.active{--color: red;outline:1px solid #000000!important}.color-swatch-panel{animation:fade-in .3s ease-in-out forwards}.color-swatch-panel:not(.show){display:none!important}