.color-swatch-container{position:relative;display:flex;flex-direction:row;width:100%;height:fit-content}.color-swatch{position:relative;width:.9rem;height:.9rem;border-radius:0%;-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 2px 0 0}.color-swatch.active{--color: red;outline:1px solid #000000!important}.white-border{outline:.5px solid #dcdcdc!important;outline-offset:-2px}.color-swatch-remaining{display:inline-flex;align-items:center;font-size:.75rem;margin-left:.125rem;vertical-align:top;line-height:1;height:.9rem}.color-swatch-panel{animation:fade-in .3s ease-in-out forwards}.color-swatch-panel:not(.show){display:none!important}