.has-bar>.mp-pick{display:none}.mp-bar{--thumb: #fff;--r: 0;position:relative;width:100%;max-width:460px;height:48px;margin:8px 0 4px;touch-action:pan-y}.mp-bar__track:empty{display:block}.mp-bar__track{position:absolute;left:16px;right:16px;top:50%;height:14px;margin-top:-7px;border-radius:999px;box-shadow:0 0 0 1px #fff3,inset 0 1px 2px #0000004d}.mp-bar__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:grab;outline:none}.mp-bar__input:active{cursor:grabbing}.mp-bar__input::-webkit-slider-runnable-track{height:48px;background:transparent;border:0}.mp-bar__input::-moz-range-track{height:48px;background:transparent;border:0}.mp-bar__input::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:8px;border:3px solid #f7f7f7;border-radius:50%;background:radial-gradient(circle at 30% 26%,#fff9 0,#fff0 46%),var(--thumb);box-shadow:0 2px 10px #00000080;transition:transform .15s ease}.mp-bar__input::-moz-range-thumb{box-sizing:border-box;width:32px;height:32px;border:3px solid #f7f7f7;border-radius:50%;background:radial-gradient(circle at 30% 26%,#fff9 0,#fff0 46%),var(--thumb);box-shadow:0 2px 10px #00000080;transition:transform .15s ease}.mp-bar.is-drag .mp-bar__input::-webkit-slider-thumb{transform:scale(1.15)}.mp-bar.is-drag .mp-bar__input::-moz-range-thumb{transform:scale(1.15)}.mp-bar__input:focus-visible::-webkit-slider-thumb{outline:3px solid #f7f7f7;outline-offset:3px}.mp-bar__input:focus-visible::-moz-range-thumb{outline:3px solid #f7f7f7;outline-offset:3px}.mp-bar__tip{position:absolute;left:calc(16px + (100% - 32px) * var(--r));bottom:100%;transform:translate(-50%,2px);padding:5px 10px;border-radius:999px;background:#0a0a0ce0;color:#f7f7f7;font-family:var(--mp-font-mono, ui-monospace, monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease}.mp-bar:focus-within .mp-bar__tip,.mp-bar.is-drag .mp-bar__tip{opacity:1}@media(hover:hover){.mp-bar:hover .mp-bar__tip{opacity:1}}@media(prefers-reduced-motion:reduce){.mp-bar__input::-webkit-slider-thumb,.mp-bar__input::-moz-range-thumb,.mp-bar__tip{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/mp-colorbar.css.map */