.grid-list {
     --color: #f6f8ff;
     --background: #2b3044;
     --background-hover: #1e2235;
     --icon-color: #bbc1e1;
     padding: 6px 12px 6px 8px;
     margin: 0;
     display: flex;
     outline: none;
     position: relative;
     border: none;
     border-radius: 9px;
     background: var(--b, var(--background));
     cursor: pointer;
     -webkit-appearence: none;
     -webkit-tap-highlight-color: transparent;
     transform: scale(var(--scale, 1)) translateZ(0);
     transition: transform 0.15s, background 0.4s;
     animation: wiggle 2s linear infinite;
}

/* Keyframes */
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}
.grid-list:active {
     --scale: 0.95;
}
.grid-list:hover {
     --b: var(--background-hover);
}
.grid-list.without-text {
     --background: var(--all_button_back);
     --background-hover: var(--all_button_back);
     --icon-color: #fff;
     padding: 6px;
}

.grid-list .recog{
    background: #ff0000;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    right: -10px;
}

.grid-list .icon {
     width: 24px;
     height: 24px;
     position: relative;
}
.grid-list .icon i {
     position: absolute;
     left: var(--left, 4px);
     top: var(--top, 4px);
     display: block;
     border-radius: 2px;
     width: var(--width, 7px);
     height: var(--height, 7px);
     background: var(--icon-color);
     animation: var(--name, var(--dots-name, none)) var(--duration, var(--dots-duration, 0.5s)) var(--easing, var(--dots-easing, linear)) forwards var(--delay, var(--dots-delay, 0s));
}
.grid-list .icon .dots i:nth-child(1) {
     --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, 0.15s);
     --easing: var(--lines-easing, linear);
     --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 {
   margin-left: 4px;
   position: relative;
   line-height: 24px;
   font-weight: 500;
   font-size: 18px;
   min-width: 28px;
   color: var(--color);
}
.grid-list .text span {
     --y-default: 0;
     --o-default: 1;
     --y-active: -12px;
     --o-active: 0;
     display: block;
     opacity: var(--o-default);
     transform: translateY(var(--y-default)) translateZ(0);
     animation: var(--span-name, none) 0.4s ease forwards;
}
.grid-list .text span:last-child {
     --y-default: 12px;
     --o-default: 0;
     --y-active: 0;
     --o-active: 1;
     position: absolute;
     left: 0;
     top: 0;
}
.grid-list.animation {
     --span-name: text;
     --dots-name: back;
     --lines-name: scale-down;
}
.grid-list.animation .lines i {
     transform-origin: 0 50%;
}
.grid-list.animation .lines i:nth-child(3), .grid-list.animation .lines i:nth-child(4) {
     transform-origin: 100% 50%;
}
.grid-list.animation.active {
     --span-name: text-active;
     --dots-name: move;
     --lines-name: scale;
     --lines-duration: 0.15s;
     --lines-delay: 0.3s;
}
.grid-list.animation.active .lines i {
     transform-origin: 100% 50%;
}
.grid-list.animation.active .lines i:nth-child(3), .grid-list.animation.active .lines i:nth-child(4) {
     transform-origin: 0 50%;
}

.grid-list.animation.active-block {
     --dots-name: back;
     --lines-name: scale-down;
}

.grid-list.animation.active-block .dots i{
    position: absolute;
    left: var(--left, 2px);
    top: var(--top, 2px);
    display: block;
    border-radius: 2px;
    width: var(--width, 20px);
    height: var(--height, 20px);
}
.grid-list.animation.active-block .dots i:nth-child(1){
    --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: 0.15s;
    --lines-delay: 0.3s;
}
.grid-list.animation.active-switch .dots i:nth-child(1) {
    --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;
}


.grid-list.animation.active-no-imge {
    --span-name: text-active;
    --dots-name: move;
    --lines-name: scale;
    --lines-duration: 0.15s;
    --lines-delay: 0.3s;
}
.grid-list.animation.active-no-imge .dots{
    display: none;
}
.grid-list.animation.active-no-imge .lines i {
    --left: 4px;
    --width: 15px;
}
 @keyframes text {
     0% {
         opacity: var(--o-active);
         transform: translateY(var(--y-active)) translateZ(0);
    }
     100% {
         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);
    }
     100% {
         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(0.4);
    }
     100% {
         transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    }
}
 @keyframes back {
     0%, 15% {
         transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    }
     50% {
         transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    }
     100% {
         transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    }
}
 @keyframes scale {
     100% {
         transform: translateY(20%) translateZ(0) scaleX(1);
    }
}
 @keyframes scale-down {
     0% {
         transform: translateY(20%) translateZ(0) scaleX(1);
    }
     100% {
         transform: translateY(20%) translateZ(0) scaleX(0);
    }
}