.color-option{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;width:100%}.color-option button{border:1px solid transparent;border-radius:100px;display:grid;padding:2px;place-content:center;position:relative;transition:.3s}.color-option button:disabled{cursor:not-allowed}.color-option button.loading{animation:loading .7s infinite alternate;cursor:wait}@keyframes loading{0%{opacity:.6}to{opacity:.3}}.color-option button i{color:#03a9f4;font-size:30px;left:10px;opacity:0;position:absolute;top:calc(50% - 11px);transition:.3s;visibility:hidden;z-index:10!important}.color-option button .circle-image{border:8px solid var(--color-bg-products);border-radius:32px;height:48px;overflow:hidden;transition:.2s ease-in-out;width:48px}.color-option button .circle-image img{aspect-ratio:1/1;height:100%;object-fit:cover;width:100%}.color-option button .circle-image.available:hover{border-width:3px}.color-option button .circle-image.unavailable{opacity:.5}.color-option button>span{border:8px solid var(--color-bg-products);border-radius:100px;display:inline-block;height:48px;overflow:hidden;position:relative;transition:.2s ease-in-out;width:48px}.color-option button>span .third-color{display:inline-block;height:100%;position:absolute;right:50%;rotate:-45deg;top:0;transform-origin:right;width:100%}.color-option button>span.available:hover{border-width:3px}.color-option button .none-option{border:4px solid var(--color-primary);position:relative;transition:.1s ease-in-out}.color-option button .none-option .slash-none-option{background-color:var(--color-primary);height:4px;inset:0;margin:auto;position:absolute;transform:rotate(45deg);transition:.1s ease-in-out;width:100%}.color-option button .none-option:hover{border-width:6px!important}.color-option button .none-option:hover .slash-none-option{height:6px}.color-option button .unavailable{opacity:.5}.color-option button:has(.unavailable){border-color:#cecece;position:relative}.color-option button:has(.unavailable):after{background-color:#cecece;content:"";height:1px;inset:0;margin:auto;position:absolute;transform:rotate(-45deg);width:100%}.color-option .active{border-color:#03a9f4}.color-option .active i{font-size:16px;left:-33px;opacity:1;top:4px;visibility:visible}