color-gauge{display:block;position:relative;max-width:800px;margin:0 auto}color-gauge div:empty{display:block}.color-gauge{position:relative;height:var(--gauge-height, 60px);border-radius:calc(var(--gauge-height, 30px) / 2);overflow:hidden;box-shadow:0 4px 12px #0000001a;cursor:pointer}.color-gauge-gradient{width:100%;height:100%;transition:background .3s ease}.color-marker{position:absolute;top:50%;transform:translateY(-50%);width:4px;height:calc(var(--gauge-height, 40px) * .67);background:#fffc;border-radius:2px;pointer-events:none;transition:opacity .3s ease,left .1s ease;opacity:0}.color-gauge:hover .color-marker{opacity:1}.color-tooltip{position:absolute;left:50%;transform:translate(-50%);background:#fff;border-radius:8px;box-shadow:0 8px 24px #00000026;padding:12px;opacity:0;transition:opacity .3s ease;z-index:10;min-width:120px;text-align:center}.color-tooltip--above{top:unset;bottom:calc(var(--gauge-height) + 10px)}.color-tooltip--below{top:calc(var(--gauge-height) + 10px);bottom:unset}.color-tooltip.show{opacity:1}.color-tooltip-image{width:var(--image-width, 80px);height:var(--image-width, 80px);border-radius:8px;margin:0 auto 8px;border:3px solid #f0f0f0}.color-tooltip-image:last-child{margin-bottom:0}.color-tooltip-name{font-size:14px;font-weight:600;color:#333;margin:0}.color-tooltip-code{font-size:12px;color:#666;margin:4px 0 0;font-family:monospace}.color-tooltip-link{width:100%;height:100%}.color-tooltip-link:empty{display:block}.color-gauge-title{text-align:center;margin-bottom:2rem}.color-gauge-button{text-align:center;margin-top:4rem}.section-color-gauge:has(.color-tooltip--below.show) .color-gauge-button{margin-top:calc(var(--image-width, 80px) + 6rem)}.color-gauge-button .button{min-width:200px}@media screen and (max-width:749px){.color-gauge{height:calc(var(--gauge-height, 50px) * .83);border-radius:calc(var(--gauge-height, 25px) * .83 / 2)}.color-marker{height:calc(var(--gauge-height, 40px) * .83 * .67)}.color-tooltip{min-width:100px}.color-tooltip--above{bottom:calc(var(--gauge-height) * .83 + 10px)}.color-tooltip--below{top:calc(var(--gauge-height) * .83 + 10px)}.color-tooltip-image{width:60px;height:60px;width:calc(var(--image-width, 60px) * .83);height:calc(var(--image-width, 60px) * .83)}.section-color-gauge:has(.color-tooltip--below.show) .color-gauge-button{margin-top:calc(var(--image-width, 60px) * .83 + 6rem)}}
/*# sourceMappingURL=/cdn/shop/t/186/assets/component-color-gauge.css.map */