:root{--all_button_back:#ff8a00;--icon-color:#fff}.grid-list{--color:#f6f8ff;--background:#2b3044;--background-hover:#1e2235;--icon-color:#bbc1e1;background:var(--all_button_back);cursor:pointer;-webkit-appearence:none;-webkit-tap-highlight-color:transparent;transform:scale(var(--scale,1))translateZ(0);border:none;border-radius:9px;outline:none;margin:0;padding:6px 12px 6px 8px;transition:transform .1s;display:flex;position:relative}@keyframes wiggle{0%,7%{transform:rotate(0)}15%{transform:rotate(-15deg)}20%{transform:rotate(10deg)}25%{transform:rotate(-10deg)}30%{transform:rotate(6deg)}35%{transform:rotate(-4deg)}40%,to{transform:rotate(0)}}.grid-list:active{--scale:1}.grid-list:hover{background:var(--all_button_back)}.grid-list.without-text{--background:var(--all_button_back);--background-hover:var(--all_button_back);--icon-color:#fff;padding:6px}.grid-list .icon{width:24px;height:24px;position:relative}.grid-list .icon i{left:var(--left,4px);top:var(--top,4px);width:var(--width,7px);height:var(--height,7px);background:var(--icon-color);animation:var(--name,var(--dots-name,none))var(--duration,var(--dots-duration,.4s))var(--easing,var(--dots-easing,ease-out))forwards var(--delay,var(--dots-delay,0s));border-radius:2px;display:block;position:absolute}.grid-list .icon .dots i:first-child{--x-middle:-8px;--y-middle:10px;--x-end:-2px;--y-end:12px;--x-back:10px;--y-back:7px;--x-back-end:9px;--y-back-end:0}.grid-list .icon .dots i:nth-child(2){--left:13px;--x-middle:-12px;--y-middle:5px;--x-end:-11px;--y-end:7px;--x-back:-3px;--y-back:1px;--x-back-end:-9px;--y-back-end:0}.grid-list .icon .dots i:nth-child(3){--top:13px;--x-middle:4px;--y-middle:-5px;--x-end:-2px;--y-end:-7px;--x-back:-5px;--y-back:0px;--x-back-end:9px;--y-back-end:0}.grid-list .icon .dots i:nth-child(4){--left:13px;--top:13px;--x-middle:0;--y-middle:-10px;--x-end:-11px;--y-end:-12px;--x-back:-14px;--y-back:-8px;--x-back-end:-9px;--y-back-end:0}.grid-list .icon .lines{--name:var(--lines-name,none);--duration:var(--lines-duration,.2s);--easing:var(--lines-easing,ease-out);--delay:var(--lines-delay,0s)}.grid-list .icon .lines i{--left:9px;--top:3px;--height:2px;--width:11px;transform:translateY(20%)translateZ(0)scaleX(0)}.grid-list .icon .lines i:nth-child(2){--top:8px}.grid-list .icon .lines i:nth-child(3){--top:13px}.grid-list .icon .lines i:nth-child(4){--top:18px}.grid-list .text{min-width:28px;color:var(--color);margin-left:4px;font-size:18px;font-weight:500;line-height:24px;position:relative}.grid-list .text span{--y-default:0;--o-default:1;--y-active:-12px;--o-active:0;opacity:var(--o-default);transform:translateY(var(--y-default))translateZ(0);animation:var(--span-name,none).4s ease forwards;display:block}.grid-list .text span:last-child{--y-default:12px;--o-default:0;--y-active:0;--o-active:1;position:absolute;top:0;left:0}.grid-list.animation{--span-name:text;--dots-name:back;--lines-name:scale-down}.grid-list.animation .lines i{transform-origin:0}.grid-list.animation .lines i:nth-child(3),.grid-list.animation .lines i:nth-child(4){transform-origin:100%}.grid-list.animation.active{--span-name:text-active;--dots-name:move;--lines-name:scale;--lines-duration:.2s;--lines-delay:0s}.grid-list.animation.active .lines i{transform-origin:100%}.grid-list.animation.active .lines i:nth-child(3),.grid-list.animation.active .lines i:nth-child(4){transform-origin:0}.grid-list.animation.active-block{--dots-name:back;--lines-name:scale-down}.grid-list.animation.active-block .dots i{left:var(--left,2px);top:var(--top,2px);width:var(--width,20px);height:var(--height,20px);border-radius:2px;display:block;position:absolute}.grid-list.animation.active-block .dots i:first-child{--x-back-end:unset}.grid-list.animation.active-block .dots i:nth-child(2),.grid-list.animation.active-block .dots i:nth-child(3),.grid-list.animation.active-block .dots i:nth-child(4){display:none}.grid-list.animation.active-switch{--span-name:text-active;--dots-name:move;--lines-name:scale;--lines-duration:.2s;--lines-delay:0s}.grid-list.animation.active-switch .dots i:first-child{--left:18px;--x-middle:-8px;--y-middle:10px;--x-end:-2px;--y-end:12px;--x-back:10px;--y-back:7px;--x-back-end:9px;--y-back-end:0}.grid-list.animation.active-switch .dots i:nth-child(2){--left:27px;--x-middle:-12px;--y-middle:5px;--x-end:-11px;--y-end:7px;--x-back:-3px;--y-back:1px;--x-back-end:-9px;--y-back-end:0}.grid-list.animation.active-switch .dots i:nth-child(3){--left:18px;--top:13px;--x-middle:4px;--y-middle:-5px;--x-end:-2px;--y-end:-7px;--x-back:-5px;--y-back:0px;--x-back-end:9px;--y-back-end:0}.grid-list.animation.active-switch .dots i:nth-child(4){--left:27px;--top:13px;--x-middle:0;--y-middle:-10px;--x-end:-11px;--y-end:-12px;--x-back:-14px;--y-back:-8px;--x-back-end:-9px;--y-back-end:0}.grid-list.animation.active-switch .lines i{--left:4px}@keyframes text{0%{opacity:var(--o-active);transform:translateY(var(--y-active))translateZ(0)}to{opacity:var(--o-default);transform:translateY(var(--y-default))translateZ(0)}}@keyframes text-active{0%{opacity:var(--o-default);transform:translateY(var(--y-default))translateZ(0)}to{opacity:var(--o-active);transform:translateY(var(--y-active))translateZ(0)}}@keyframes move{50%{transform:translate(var(--x-middle,0),var(--y-middle,0))scale(.4)}to{transform:translate(var(--x-end,0),var(--y-end,0))scale(.4)}}@keyframes back{0%,15%{transform:translate(var(--x-end,0),var(--y-end,0))scale(.4)}50%{transform:translate(var(--x-back,0),var(--y-back,0))scale(.5)}to{transform:translate(var(--x-back-end,0),var(--y-back-end,0))scale(1)}}@keyframes scale{to{transform:translateY(20%)translateZ(0)scaleX(1)}}@keyframes scale-down{0%{transform:translateY(20%)translateZ(0)scaleX(1)}to{transform:translateY(20%)translateZ(0)scaleX(0)}}