/* implicit material: glass */

[data-implicit-interface] .implicit-glass, [data-implicit-toasts] .implicit-glass  {

}

html[data-implicit-svg-backdrop] .toastify.implicit-glass {
  -webkit-backdrop-filter: url(#implicit-liquid-glass-toast);
  backdrop-filter: url(#implicit-liquid-glass-toast);
}

[data-implicit-interface] .implicit-glass {
  -webkit-backdrop-filter: blur(12px);
    backdrop-filter:  blur(12px);

  /* backdrop-filter: url(#implicit-liquid-glass); blur(12px); url(#implicit-liquid-glass) url(#implicit-liquid-glass) */
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {

}

html[data-implicit-svg-backdrop] .implicit-glass::before {

}

html[data-implicit-svg-backdrop] .implicit-glass {
  /*-webkit-backdrop-filter: url(#implicit-liquid-glass);
  backdrop-filter: url(#implicit-liquid-glass);*/
  background: hsl(from var(--implicit-surface-3) h s l / 0.45);
}

.implicit-glass::before {
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  background-image: url("/wp-content/plugins/implicit/includes/assets/materials/glass/design/light.png");
  background-size: 120% 120%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.2;
  mix-blend-mode: luminosity;
}

.implicit-glass::after {
  --height: 102%;
  --width: 102%;
  --top: -1%;
  --left:-1%;
  position: absolute;
  content:"";
  height: var(--height);
  width: var(--width);
  top: var(--top);
  left: var(--left);
  pointer-events:none;
  z-index:0;
  border-radius: calc(var(--implicit-border-radius) + 10px);
  overflow: hidden;
  padding: var(--implicit-border-width-pseudo, 1px);
  background-image: url("/wp-content/plugins/implicit/includes/assets/materials/glass/design/light.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.3;
}

@media (prefers-reduced-motion: reduce){
  .implicit-glass::after{
    animation: none;
  }
}

.implicit-glass.--dark-glass {

}

.implicit-glass.--dark-glass::before {
  background: hsl(from var(--implicit-surface-3) h s l / 0.55);
}

.implicit__panel.--dark-glass { /* modifier hook if you want */ }