.gradient-picker__angle{&[data-v-8c40a965]{width:25px;height:25px;z-index:var(--z-index-gradient-picker-angle);flex-direction:column;margin-left:5px;display:flex;position:relative}& .menu{&[data-v-8c40a965]{background:var(--base-color-1);width:25px;height:25px;box-shadow:0 0 0 1px var(--shadow-color-2), 0 0 10px #0000;border-radius:3px;position:absolute;top:0;left:0;overflow:hidden}&.dragging[data-v-8c40a965]{overflow:visible}& .inner{&[data-v-8c40a965]{width:85px;height:135px;z-index:var(--z-index-gradient-picker-angle-inner);margin-top:-30px;margin-left:-30px;padding:20px;position:absolute}& .circle{&[data-v-8c40a965]{width:45px;height:45px;margin-bottom:20px;position:relative}& i{&[data-v-8c40a965]{width:45px;height:45px;z-index:var(--z-index-gradient-picker-angle-inner-circle);background:#fff0;border-radius:50%;place-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}& img[data-v-8c40a965]{pointer-events:none;user-select:none;transition:none}}& .buttons{&[data-v-8c40a965]{border-radius:50%;position:absolute;inset:-18px;overflow:hidden;transform:translate(0)}& div{&[data-v-8c40a965]{transform-origin:bottom;width:20px;height:50%;margin-left:-10px;position:absolute;top:0;left:50%;overflow:hidden}& span{&[data-v-8c40a965]{cursor:pointer;border-radius:50%;place-content:center;align-items:center;width:20px;height:20px;display:flex;position:absolute}&[data-v-8c40a965]:after{content:"";background:var(--shadow-color-1);width:4px;height:4px;box-shadow:0 0 0 0 var(--shadow-color-1);border-radius:50%;transition:all .3s cubic-bezier(.4,.4,0,1);display:flex}&[data-v-8c40a965]:hover:after{background:var(--text-color-4);box-shadow:0 0 0 4px var(--shadow-color-1)}}}}}& .input{&[data-v-8c40a965]{flex-direction:column;place-content:center flex-start;align-items:center;width:40px;height:auto}& input{&[data-v-8c40a965]{text-align:center;width:100%;height:24px;color:var(--text-color-1);border:none;border-radius:14px;outline:none;font-size:14px;font-weight:500;transition:all .2s cubic-bezier(.4,.4,0,1)}&[data-v-8c40a965]:hover{background:var(--shadow-color-0)}&[data-v-8c40a965]:focus{background:var(--base-color-1);box-shadow:0 0 0 2px var(--shadow-color-1)}}& p[data-v-8c40a965]{color:var(--text-color-4);text-align:center;margin-top:0;font-size:10px;font-weight:500;line-height:16px;display:block}}}&.visible{&[data-v-8c40a965]{width:85px;height:135px;box-shadow:0 0 0 1px var(--shadow-color-0), 0 0 10px #0000001a;border-radius:5px;top:-30px;left:-30px}& .inner{&[data-v-8c40a965]{margin-top:0;margin-left:0}& i[data-v-8c40a965]{background:var(--shadow-color-0)}}}& .draggable-base[data-v-8c40a965]{position:absolute;inset:-200px}}}.gradient-picker__bar__knob{&[data-v-557a7fd1]{cursor:ew-resize;width:8px;height:19px;z-index:var(--z-index-gradient-picker-bar-knob);margin-top:-5px;margin-left:-4px;transition:none;position:absolute}&[data-v-557a7fd1]:before{content:"";height:5px;position:absolute;bottom:100%;left:-5px;right:-5px}&[data-v-557a7fd1]:after{content:"";background:#fff;border-radius:4px;width:4px;height:15px;transition:all .3s cubic-bezier(.4,.4,0,1);position:absolute;top:2px;left:2px;box-shadow:inset 0 0 0 1px #0000,0 0 0 1px #00000026}&.selected[data-v-557a7fd1]:after{box-shadow:inset 0 0 0 1px #0000,0 0 0 1px #0009}&[data-v-557a7fd1]:hover:after,&.dragging[data-v-557a7fd1]:after{box-shadow:inset 0 0 0 1px #0000,0 0 0 3px #00000026}& .remove{&[data-v-557a7fd1]{cursor:pointer;background:0 0;border-radius:50%;place-content:center;align-items:center;width:16px;height:15px;margin-left:-8px;display:flex;position:absolute;top:-19px;left:50%}&[data-v-557a7fd1]:hover{background:#0000001a}}}.gradient-picker__bar{&[data-v-02a5a38c]{background-color:var(--shadow-color-0);background-image:url(/assets/p-10-check-dark-g2dG-7vn.svg);background-size:10px;border-radius:5px;flex-direction:column;flex:1;height:10px;margin:0 10px;position:relative}& .bar{&[data-v-02a5a38c]{cursor:pointer;width:100%;height:100%;box-shadow:0 0 0 1px var(--shadow-color-2) inset;border-radius:5px;position:absolute;top:0;left:0}& .virtual-knob[data-v-02a5a38c]{opacity:.6;pointer-events:none;background:#fff;border-radius:4px;width:4px;height:14px;margin-top:-3px;margin-left:-2px;transition:none;display:none;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 1px #0000,0 0 0 1px #00000026}&:hover{& .virtual-knob[data-v-02a5a38c]{display:block}}}}.gradient-picker{&[data-v-e8c63cc6]{width:100%;height:auto;z-index:var(--z-index-gradient-picker);flex-direction:column}& .control{&[data-v-e8c63cc6]{flex-direction:row;align-content:center;align-items:center;height:55px;padding:0 10px;display:flex;position:relative}& i.gradient-icon{&[data-v-e8c63cc6]{background-color:var(--shadow-color-0);background-image:url(/assets/p-10-check-dark-g2dG-7vn.svg);background-size:10px;border-radius:3px;width:25px;height:25px;margin-right:5px;display:flex}& span[data-v-e8c63cc6]{width:100%;height:100%;box-shadow:0 0 0 1px var(--shadow-color-2) inset;border-radius:3px;transition:none}}& .__border{&[data-v-e8c63cc6]{pointer-events:none;width:100%;height:10px;position:absolute;bottom:0;left:0}& svg{& path[data-v-e8c63cc6]{stroke:var(--shadow-color-2);fill:none;stroke-linecap:round;stroke-linejoin:round}}}}& input.test[data-v-e8c63cc6]{width:100%;margin-top:50px;padding:10px;font-size:10px;font-weight:600}}.MyPalette{&[data-v-264fe1b7]{flex-wrap:wrap;width:100%;display:flex}& li{&[data-v-264fe1b7]{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%);background-position:0 0,5px 5px;background-size:10px 10px;border-radius:3px;width:25px;height:25px;margin-bottom:5px;margin-right:5px;transition:all .2s cubic-bezier(.4,.4,0,1);display:flex;position:relative}& button[data-v-264fe1b7]{cursor:pointer;background:0 0;border:none;place-content:center;width:100%;height:100%;margin:0;padding:0;display:flex}&.assertion[data-v-264fe1b7]{border-color:var(--piano-blue-200);box-shadow:0 0 0 2px var(--piano-blue-200);transition-duration:50ms;transform:scale(1.02)}&.empty{&[data-v-264fe1b7]{background:var(--piano-const-gray-100)}& .clear-line[data-v-264fe1b7]{background:var(--piano-const-gray-400);width:100%;height:1px;transform:rotate(-45deg)}}&:hover{&[data-v-264fe1b7]{box-shadow:0 0 0 3px var(--shadow-color-1)}& .delete[data-v-264fe1b7]{opacity:1;pointer-events:all;transition:all .3s cubic-bezier(.4,.4,0,1) .4s;transform:scale(1)}}& i[data-v-264fe1b7]{box-shadow:0 0 0 1px var(--shadow-color-2) inset;border-radius:3px;width:100%;height:100%;transition:none;display:flex}}}.color-picker__palette[data-v-2f619d12]{border-top:1px solid var(--shadow-color-1);flex-direction:column;justify-content:flex-start;align-items:stretch;gap:12px;width:100%;height:400px;margin-top:10px;padding:10px;display:flex;overflow:auto}.__group[data-v-2f619d12]{flex-flow:column wrap;justify-content:flex-start;align-items:stretch;gap:5px;width:100%;display:flex}.title[data-v-2f619d12]{color:var(--text-color-2);margin-right:auto;font-size:12px;font-weight:700}.item{&[data-v-2f619d12]{cursor:pointer;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%);background-position:0 0,5px 5px;background-size:10px 10px;border-radius:3px;place-content:center;align-items:center;width:25px;height:25px;transition:all .2s cubic-bezier(.4,.4,0,1);display:flex;position:relative;box-shadow:0 0 #0000}&[data-v-2f619d12]:hover{box-shadow:0 0 0 3px var(--shadow-color-1)}& i[data-v-2f619d12]{box-shadow:0 0 0 1px var(--shadow-color-2) inset;border-radius:3px;width:100%;height:100%;transition:none;display:flex}}.color-tool__picker{&[data-v-911f6687]{flex-direction:column;width:100%;display:flex}& nav{&[data-v-911f6687]{flex-direction:row;justify-content:center;padding:10px 10px 0;display:flex;position:relative}& .palette-toggle{&[data-v-911f6687]{cursor:pointer;border-radius:5px;flex-wrap:wrap;width:25px;height:25px;padding:2px;transition:all .2s cubic-bezier(.4,.4,0,1);display:flex;position:absolute;top:10px;left:10px}&[data-v-911f6687]:hover{background:var(--shadow-color-0)}&.selected[data-v-911f6687]{background:var(--shadow-color-1)}& i[data-v-911f6687]{border:1px solid var(--text-color-2);background:var(--base-color-1);border-radius:3px;width:7px;height:7px;margin:.5px}}& ul{&[data-v-911f6687]{display:flex}& li{&[data-v-911f6687]{cursor:pointer;border-radius:5px;place-content:center;align-items:center;width:45px;height:25px;margin:0 1px;transition:all .2s cubic-bezier(.4,.4,0,1);display:flex}&[data-v-911f6687]:hover{background:var(--shadow-color-0)}&.selected[data-v-911f6687]{background:var(--shadow-color-1)}& i{&[data-v-911f6687]{border:1px solid var(--text-color-2);background:var(--base-color-1);border-radius:3px;width:11px;height:11px}&.linear-gradient[data-v-911f6687]{background:linear-gradient(var(--base-color-1) 20%, var(--text-color-3))}}}}}}.empty{&[data-v-911f6687]{background:var(--piano-const-gray-100);border-radius:3px;width:25px;height:25px;position:absolute;top:10px;right:10px}& .clear-line[data-v-911f6687]{background:var(--piano-const-gray-400);width:100%;height:1px;display:block;transform:rotate(-45deg)}}