.gradient-result{border-radius:6px;flex-grow:1;width:100%;height:74px;font-size:16px;position:relative}.gradient-result:hover .gradient-angle{opacity:1}.gradient-mode{cursor:pointer;opacity:.25;border:2px solid #fff;border-radius:.15em;width:32px;height:32px;transition:all .3s;position:relative;top:20px;left:16px}.gradient-mode:before{content:"";margin:auto;transition:all .3s;position:absolute;inset:0}.gradient-mode:hover{opacity:1}.gradient-mode[data-mode=linear]:before{background:#fff;border-radius:50em;width:70%;height:2px;transform:rotate(45deg)}.gradient-mode[data-mode=radial]:before{background-color:#fff;border:2px solid #fff;border-radius:100%;width:50%;height:50%}.gradient-mode[data-mode=radial]+.gradient-angle{opacity:0}.gradient-angle{opacity:.25;background:#fff;border-radius:100%;width:.35em;height:.35em;margin:auto;transition:all .3s;position:absolute;inset:0}.gradient-angle>div{transform-origin:0;background:#fff;border-radius:1em;width:2em;height:2px;margin:auto 0;position:absolute;inset:0 0 0 50%}.gradient-pos{opacity:1;grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;width:5em;height:5em;margin:auto;transition:all .3s;display:grid;position:absolute;inset:0}.gradient-pos>div{border:2px solid #0000;width:15px;height:15px;margin:auto;transition:all .3s;position:relative}.gradient-pos>div:not(.gradient-active){cursor:pointer}.gradient-pos>div:before{content:"";opacity:.25;background:#fff;border-radius:100%;width:5px;height:5px;margin:auto;transition:all .3s;position:absolute;inset:0}.gradient-pos>div:hover:before{opacity:1}.gradient-pos>div.gradient-active{border-color:#fff;border-radius:100%}.gradient-pos>div.gradient-active:before{opacity:1}