.ep-liquid-glass{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background: var(--ep-lg-fallback-bg, rgba(255,255,255,.18));
  border: 1px solid var(--ep-lg-border, rgba(255,255,255,.28));
  box-shadow: var(--ep-lg-shadow, 0 -12px 30px rgba(0,0,0,.12));
}

.ep-liquid-glass > *{
  position:relative;
  z-index:1;
}

.ep-ui-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border: var(--ep-btn-border-width, 1px) solid var(--ep-btn-border-color, rgba(255,255,255,.35));
  color: var(--ep-btn-text-color, #0f172a);
  font-size: var(--ep-btn-font-size, 14px);
  font-weight: var(--ep-btn-font-weight, 700);
  letter-spacing: var(--ep-btn-letter-spacing, 0.02em);
  padding: var(--ep-btn-padding-y, 12px) var(--ep-btn-padding-x, 18px);
  border-radius: var(--ep-btn-radius, 999px);
  background: var(--ep-btn-bg, rgba(255,255,255,.25));
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--ep-btn-blur, 14px)) saturate(160%);
  backdrop-filter: blur(var(--ep-btn-blur, 14px)) saturate(160%);
  text-decoration:none;
  cursor:pointer;
  transition: transform .18s ease;
  isolation:isolate;
  overflow:hidden;
}

.ep-ui-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  opacity:.6;
  pointer-events:none;
}

.ep-ui-btn > *{
  position:relative;
  z-index:1;
}

.ep-ui-btn:active{
  transform:translateY(1px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ep-ui-btn{
    background: var(--ep-btn-bg, rgba(255,255,255,.25));
  }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ep-liquid-glass{
    background: transparent;
    border: 1px solid transparent;
  }

  .ep-liquid-glass::before{
    content:"";
    position:absolute;
    inset:-32px;
    border-radius:inherit;
    z-index:0;
    pointer-events:none;
    -webkit-backdrop-filter: blur(var(--ep-lg-frost-blur, 12px)) saturate(160%);
    backdrop-filter: blur(var(--ep-lg-frost-blur, 12px)) saturate(160%);
    filter: url(#ep-liquid-glass-distortion);
    background: var(--ep-lg-tint-bg, rgba(255,255,255,.18));
    box-shadow:
      inset 0 0 0 1px var(--ep-lg-border, rgba(255,255,255,.28)),
      inset 0 0 var(--ep-lg-inner-shadow-blur, 1px) var(--ep-lg-inner-shadow-spread, 0px) var(--ep-lg-inner-shadow-color, rgba(255,255,255,.35));
    -webkit-mask-image: radial-gradient(140% 120% at 50% 50%, #000 75%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(140% 120% at 50% 50%, #000 75%, rgba(0,0,0,0) 100%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }

  .ep-liquid-glass::after{
    content:"";
    position:absolute;
    inset:-48px;
    border-radius:inherit;
    z-index:0;
    pointer-events:none;
    background:#fff;
    opacity: var(--ep-lg-noise-opacity, 0.12);
    filter: url(#ep-liquid-glass-noise);
    -webkit-mask-image: radial-gradient(140% 120% at 50% 50%, #000 72%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(140% 120% at 50% 50%, #000 72%, rgba(0,0,0,0) 100%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }
}

@supports (-webkit-touch-callout: none) {
  .ep-liquid-glass::after{
    filter:none;
    background-color:transparent;
    background-image: var(--ep-lg-noise-fallback-image, var(--ep-lg-noise-image));
    background-repeat:repeat;
    background-size: var(--ep-lg-noise-size, 160px 160px);
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ep-liquid-glass::before{
    content:"";
    position:absolute;
    inset:-24px;
    border-radius:inherit;
    z-index:0;
    pointer-events:none;
    background-image:
      radial-gradient(120% 120% at 20% 10%, var(--ep-lg-tint-bg, rgba(255,255,255,.18)), rgba(255,255,255,0)),
      radial-gradient(140% 140% at 85% 85%, var(--ep-lg-tint-bg, rgba(255,255,255,.18)), rgba(255,255,255,0));
    filter: blur(var(--ep-lg-frost-blur, 12px));
    opacity:0.6;
  }
}

@-moz-document url-prefix() {
  .ep-liquid-glass::before{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    filter: blur(var(--ep-lg-frost-blur, 12px));
    background-image:
      radial-gradient(120% 120% at 20% 10%, var(--ep-lg-tint-bg, rgba(255,255,255,.18)), rgba(255,255,255,0)),
      radial-gradient(140% 140% at 85% 85%, var(--ep-lg-tint-bg, rgba(255,255,255,.18)), rgba(255,255,255,0));
  }

  .ep-liquid-glass::after{
    filter:none;
    background-color:transparent;
    background-image: var(--ep-lg-noise-image);
    background-repeat:repeat;
    background-size: var(--ep-lg-noise-size, 160px 160px);
  }
}