/* Glass Surface - Vanilla JS/CSS Version adapted from React Bits */

.glass-surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.26s ease-out;
}

.glass-surface__filter {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
}

.glass-surface__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

/* SVG Filter Version */
.glass-surface--svg {
  background: hsl(0 0% 100% / var(--glass-frost, 0));
  backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
  box-shadow:
    0 0 2px 1px rgba(0, 0, 0, 0.15) inset,
    0 0 10px 4px rgba(0, 0, 0, 0.1) inset,
    0px 4px 16px rgba(17, 17, 26, 0.05),
    0px 8px 24px rgba(17, 17, 26, 0.05),
    0px 16px 56px rgba(17, 17, 26, 0.05),
    0px 4px 16px rgba(17, 17, 26, 0.05) inset,
    0px 8px 24px rgba(17, 17, 26, 0.05) inset,
    0px 16px 56px rgba(17, 17, 26, 0.05) inset;
}

/* Dark mode for SVG version */
@media (prefers-color-scheme: dark) {
  .glass-surface--svg {
    background: hsl(0 0% 0% / var(--glass-frost, 0));
    box-shadow:
      0 0 2px 1px rgba(255, 255, 255, 0.35) inset,
      0 0 10px 4px rgba(255, 255, 255, 0.15) inset,
      0px 4px 16px rgba(17, 17, 26, 0.1),
      0px 8px 24px rgba(17, 17, 26, 0.1),
      0px 16px 56px rgba(17, 17, 26, 0.1),
      0px 4px 16px rgba(17, 17, 26, 0.1) inset,
      0px 8px 24px rgba(17, 17, 26, 0.1) inset,
      0px 16px 56px rgba(17, 17, 26, 0.1) inset;
  }
}

/* Fallback Version (for Safari, Firefox) */
.glass-surface--fallback {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.2),
    0 2px 16px 0 rgba(31, 38, 135, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
  .glass-surface--fallback {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
  }
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(10px)) {
  .glass-surface--fallback {
    background: rgba(255, 255, 255, 0.4);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
  }

  .glass-surface--fallback::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: inherit;
    z-index: -1;
  }
}

@supports not (backdrop-filter: blur(10px)) {
  @media (prefers-color-scheme: dark) {
    .glass-surface--fallback {
      background: rgba(0, 0, 0, 0.4);
    }

    .glass-surface--fallback::before {
      background: rgba(255, 255, 255, 0.05);
    }
  }
}

/* Focus state */
.glass-surface:focus-visible {
  outline: 2px solid #007aff;
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .glass-surface:focus-visible {
    outline-color: #0a84ff;
  }
}