.color-picker__alpha-old{&[data-v-22345bd5]{width:100%}& .bar{&[data-v-22345bd5]{background-image:linear-gradient(45deg, var(--shadow-color-1) 25%, transparent 25%, transparent 75%, var(--shadow-color-1) 75%), linear-gradient(45deg, var(--shadow-color-1) 25%, transparent 25%, transparent 75%, var(--shadow-color-1) 75%);cursor:ew-resize;background-position:0 0,5px 5px;background-size:10px 10px;border-radius:5px;width:100%;height:10px;margin-top:10px;position:relative}& span[data-v-22345bd5]{width:100%;height:100%;box-shadow:0 0 0 1px var(--shadow-color-2) inset;border-radius:5px;display:flex}& .knob[data-v-22345bd5]{background:#fff;border-radius:6px;width:8px;height:8px;margin-top:1px;margin-left:1px;position:absolute;top:0;left:0;box-shadow:0 1px 5px #0000004d,0 0 0 1px #0000001a}}}.color-picker__hex-old{&[data-v-d7650541]{flex-direction:row;flex:1;place-content:center flex-start;align-items:center;display:flex}& .input-group{&[data-v-d7650541]{flex-direction:column;flex:6;align-content:center;align-items:center;width:auto;display:flex}&.opacity{&[data-v-d7650541]{flex:4}&.isJapanese{& p[data-v-d7650541]{letter-spacing:.08em}}}& input{&[data-v-d7650541]{text-align:center;box-sizing:border-box;text-transform:uppercase;width:100%;height:22px;color:var(--text-color-1);border:none;border-radius:14px;padding:0 2px;font-size:14px;transition:all .2s cubic-bezier(.4,.4,0,1)}&[data-v-d7650541]:hover{background:var(--shadow-color-0)}&[data-v-d7650541]:focus{background:var(--base-color-1);box-shadow:0 0 0 2px var(--shadow-color-1)}}& p[data-v-d7650541]{color:var(--text-color-4);text-align:center;margin-top:2px;font-size:10px;font-weight:500;line-height:12px;display:block}}& .switch{&[data-v-d7650541]{cursor:pointer;border-radius:5px;place-content:center;align-items:center;width:25px;height:25px;margin-left:5px;display:flex}&[data-v-d7650541]:hover{background:var(--shadow-color-0);transition:none}&[data-v-d7650541]:active{background:var(--shadow-color-1)}}}.color-picker__hue{&[data-v-79ccc234]{width:100%;margin-top:10px}& .bar{&[data-v-79ccc234]{cursor:ew-resize;width:100%;height:10px;box-shadow:0 0 0 1px var(--shadow-color-2) inset;background-image:url(/assets/p-hue-Cq6DuAd5.png);background-size:cover;border-radius:5px;position:relative}& .knob[data-v-79ccc234]{background:#fff;border-radius:6px;width:8px;height:8px;margin-top:1px;margin-left:1px;position:absolute;top:0;left:0;box-shadow:0 1px 5px #0000004d,0 0 0 1px #0000001a}}}.color-picker__map{&[data-v-53ba755f]{width:100%;height:130px;box-shadow:0 0 0 1px var(--shadow-color-2) inset;background:#fff;border-radius:5px;margin-top:10px;position:relative}&.compact[data-v-53ba755f]{height:90px}& .knob[data-v-53ba755f]{background:#fff;border-radius:50%;width:8px;height:8px;margin-top:1px;margin-left:1px;position:absolute;top:0;left:0;box-shadow:0 1px 5px #0000004d,0 0 0 1px #0000001a}}.color-picker__rgb{&[data-v-92a3b9e3]{flex-direction:row;flex:1;place-content:center flex-start;align-items:center;display:flex}& .inputs{&[data-v-92a3b9e3]{flex-direction:row;flex:1;justify-content:space-between;display:flex}& div{&[data-v-92a3b9e3]{flex-direction:column;flex:1;place-content:center;align-items:center;margin:0 1px}& input{&[data-v-92a3b9e3]{text-align:center;box-sizing:border-box;width:100%;height:22px;color:var(--text-color-1);border:none;border-radius:14px;padding:0 2px;font-size:14px;transition:all .2s cubic-bezier(.4,.4,0,1)}&[data-v-92a3b9e3]:hover{background:var(--shadow-color-0)}&[data-v-92a3b9e3]:focus{background:var(--base-color-1);box-shadow:0 0 0 2px var(--shadow-color-1)}}& p[data-v-92a3b9e3]{color:var(--text-color-4);text-align:center;margin-top:2px;font-size:10px;font-weight:500;line-height:12px;display:block}}}& .switch{&[data-v-92a3b9e3]{cursor:pointer;border-radius:5px;place-content:center;align-items:center;width:25px;height:25px;margin-left:5px;display:flex}&[data-v-92a3b9e3]:hover{background:var(--shadow-color-0);transition:none}&[data-v-92a3b9e3]:active{background:var(--shadow-color-1)}}}.color-style-display{&[data-v-e16c27e9]{background-image:linear-gradient(45deg, var(--shadow-color-1) 25%, transparent 25%, transparent 75%, var(--shadow-color-1) 75%), linear-gradient(45deg, var(--shadow-color-1) 25%, transparent 25%, transparent 75%, var(--shadow-color-1) 75%);outline:1px solid var(--color-border);background-position:0 0,5px 5px;background-size:10px 10px;flex-shrink:0;width:25px;height:25px;display:flex;position:relative;overflow:hidden}&.size-md[data-v-e16c27e9]{width:20px;height:20px;position:relative}&.size-sm[data-v-e16c27e9]{width:16px;height:16px;position:relative}}.color-preview[data-v-e16c27e9]{width:100%;height:100%;display:block}.color-preview-alpha[data-v-e16c27e9]{border-radius:6px;width:calc(100% - 1px);height:calc(100% - 1px);display:block;position:absolute;top:.5px;left:.5px}.color-picker{&[data-v-af0477a7]{box-sizing:border-box;width:100%;height:auto;z-index:var(--z-index-color-picker);flex-direction:column;padding:10px;position:relative}&:not(.disableWideDetection){&[data-v-af0477a7]:before{content:"";height:235px;z-index:var(--z-index-color-picker-before);pointer-events:none;position:absolute;inset:0 -30px -30px}}&.dragging[data-v-af0477a7]:before{inset:-150px}& .values[data-v-af0477a7]{flex-direction:row;align-content:center;align-items:center;height:35px;display:flex}}