:root {
   --c-glass: #bbbbbc;
   --c-light: #fff;
   --c-dark: #000;
   --glass-reflex-dark: 1;
   --glass-reflex-light: 1;
   --saturation: 150%;
}

.eael-advance-tabs .eael-tabs-nav.eael-tabs-glassey {
   z-index: 1;
   display: flex;
   align-items: center;
   height: auto;
   width: fit-content;
   box-sizing: border-box;
   border: none;
   background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
   backdrop-filter: blur(1px) url(#switcher) saturate(var(--saturation));
   -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
   box-shadow: inset 0 0 0 1px
         color-mix(
            in srgb,
            var(--c-light) calc(var(--glass-reflex-light) * 10%),
            transparent
         ),
      inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light)
               calc(var(--glass-reflex-light) * 90%), transparent),
      inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light)
               calc(var(--glass-reflex-light) * 80%), transparent),
      inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
               calc(var(--glass-reflex-light) * 60%), transparent),
      inset -0.3px -1px 4px 0px
         color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
            transparent
         ),
      inset -1.5px 2.5px 0px -2px
         color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
            transparent
         ),
      inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark)
               calc(var(--glass-reflex-dark) * 20%), transparent),
      inset 2px -6.5px 1px -4px
         color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
            transparent
         ),
      0px 1px 5px 0px
         color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
            transparent
         ),
      0px 6px 16px 0px
         color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
            transparent
         );
   transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
      box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
   position: relative;
}

.eael-advance-tabs .eael-tabs-nav.eael-tabs-glassey > ul::after {
   content: "";
   position: absolute;
   left: 4px;
   top: 4px;
   display: block;
   border-radius: 99em;
   background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
   z-index: -1;
   box-shadow: inset 0 0 0 1px
         color-mix(
            in srgb,
            var(--c-light) calc(var(--glass-reflex-light) * 10%),
            transparent
         ),
      inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light)
               calc(var(--glass-reflex-light) * 90%), transparent),
      inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light)
               calc(var(--glass-reflex-light) * 80%), transparent),
      inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light)
               calc(var(--glass-reflex-light) * 60%), transparent),
      inset -1px 2px 3px -1px
         color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
            transparent
         ),
      inset 0px -4px 1px -2px
         color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
            transparent
         ),
      0px 3px 6px 0px
         color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
            transparent
         );
}

@keyframes scaleToggle {
   0% {
      scale: 1 1;
   }
   50% {
      scale: 1.1 1;
   }
   100% {
      scale: 1 1;
   }
}

.eael-tabs-glassey-svg {
   position: absolute;
   width: 0;
   height: 0;
   z-index: -1;
}

.eael-advance-tabs .eael-tabs-nav.eael-tabs-glassey > ul li:after {
   display: none !important;
}

.eael-tabs-vertical .eael-tabs-nav.eael-tabs-glassey {
   height: fit-content;
   align-items: flex-start;
}