// Faithful port of export:design/servv-widget-glass, minus its page background.
@use "../unit" as *;
@use "../breakpoints" as *;

.svv-wgt-v2-container {
  --svv-v2-bg-radius: 28px;
}

.svv-wgt-v2 {
  --svv-glass: rgba(255, 255, 255, 0.52);
  --svv-glass-edge: rgba(255, 255, 255, 0.75);
  --svv-glass-blur: blur(28px) saturate(180%);
  --svv-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(23, 19, 42, 0.04),
    0 12px 40px rgba(60, 30, 140, 0.1);

  // every colour defers to the block settings once the merchant opts this
  // style in; shape (radius, shadows) stays with the style either way
  --svv-text: var(--svv-v2-text, #17132a);
  --svv-text-muted: var(--svv-v2-text-muted, #7a768a);
  --svv-border: var(--svv-v2-border, rgba(23, 19, 42, 0.08));
  --svv-border-strong: var(--svv-v2-border-strong, rgba(23, 19, 42, 0.14));
  --svv-bg: var(--svv-v2-skin-bg, rgba(255, 255, 255, 0.45));
  --svv-surface: var(--svv-v2-surface, rgba(255, 255, 255, 0.45));
  --svv-card-bg: var(--svv-v2-card-bg, transparent);
  --svv-card-text: var(--svv-v2-card-text, #17132a);
  --svv-primary: var(--svv-v2-primary, #6224e7);
  --svv-primary-hover: var(--svv-v2-primary-hover, #5019c4);
  --svv-radius: 20px;
  --svv-card-shadow: none;
  --svv-card-shadow-hover: none;

  // Surfaces become separate floating panes
  .svv-shell {
    gap: u(1);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .svv-shell__header,
  .svv-shell__aside,
  .svv-shell__content {
    background: var(--svv-glass);
    -webkit-backdrop-filter: var(--svv-glass-blur);
    backdrop-filter: var(--svv-glass-blur);
    border: 1px solid var(--svv-glass-edge);
    box-shadow: var(--svv-glass-shadow);
  }

  .svv-shell__header {
    position: sticky;
    top: u(0.75);
    z-index: 5;
    border-radius: 999px;
    padding: u(0.5) u(0.5) u(0.5) u(0.625);
  }

  .svv-shell__aside {
    align-self: start;
    border-radius: 28px;
  }

  @container svv-shell (min-width: 832px) {
    .svv-shell__aside {
      position: sticky;
      top: u(5.25);
    }
  }

  .svv-shell__content {
    border-radius: 28px;
  }

  .svv-shell--with-aside .svv-shell__aside,
  .svv-shell--with-aside.svv-shell--aside-end .svv-shell__aside {
    border: 1px solid var(--svv-glass-edge);
  }

  // Controls
  .svv-search,
  .svv-select {
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 2px rgba(23, 19, 42, 0.06);
  }

  .svv-search:focus-within,
  .svv-select:focus-within {
    border-color: rgba(98, 36, 231, 0.5);
    background: rgba(255, 255, 255, 0.85);
  }

  .svv-viewmode {
    border: 0;
    border-radius: 999px;
    padding: 3px;
    background: rgba(23, 19, 42, 0.05);
    box-shadow: inset 0 1px 2px rgba(23, 19, 42, 0.06);

    button {
      border-radius: 999px;
      padding: 0 u(0.875);

      &:hover {
        background: rgba(255, 255, 255, 0.6);
        color: var(--svv-text);
      }

      &.is-active {
        background: rgba(255, 255, 255, 0.9);
        color: var(--svv-text);
        box-shadow:
          inset 0 1px 0 #fff,
          0 1px 3px rgba(23, 19, 42, 0.1),
          0 4px 12px rgba(23, 19, 42, 0.06);
      }
    }
  }

  .svv-quick button,
  .svv-filters__toggle,
  .svv-filters select,
  .svv-pagination select {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 1px 2px rgba(23, 19, 42, 0.06);
  }

  .svv-quick button:hover,
  .svv-filters__toggle:hover,
  .svv-filters select:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: #fff;
  }

  .svv-summary__card {
    border-color: rgba(255, 255, 255, 0.85);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: var(--svv-glass-shadow);
  }

  // Buttons
  .svv-card__cta,
  .svv-drawer__cta,
  .svv-submit {
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
      var(--svv-primary);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 6px 18px rgba(98, 36, 231, 0.3);

    &:hover:not(:disabled) {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
        var(--svv-primary-hover);
    }
  }

  .svv-pill,
  .svv-card__share,
  .svv-drawer__icon,
  .svv-pagination button,
  .svv-calendar__clear,
  .svv-calendar__nav button,
  .svv-monthview__nav button {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 1px 3px rgba(23, 19, 42, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    &:hover {
      background: rgba(255, 255, 255, 0.9);
      border-color: #fff;
    }
  }

  // Calendar
  .svv-calendar__day.is-marked:hover {
    background: rgba(255, 255, 255, 0.7);
  }

  .svv-calendar__day.is-selected {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 60%),
      var(--svv-primary);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 4px 12px rgba(98, 36, 231, 0.35);
  }

  .svv-monthview__grid,
  .svv-monthview__cell {
    border-color: rgba(255, 255, 255, 0.8);
  }

  .svv-monthview__cell.is-outside {
    background: rgba(255, 255, 255, 0.4);
  }

  .svv-monthview__today {
    border-color: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
  }

  .svv-monthview__more {
    border-top-color: rgba(255, 255, 255, 0.8);
  }

  // Event rows and cards
  .svv-events__items {
    gap: 0;
  }

  .svv-card {
    border: 0;
    border-top: 1px solid var(--svv-border);
    border-radius: 22px;
    background: transparent;
    box-shadow: none;

    &:hover {
      border-color: var(--svv-border);
      transform: none;
      background: rgba(255, 255, 255, 0.55);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 6px 24px rgba(23, 19, 42, 0.06);
    }
  }

  .svv-card__media {
    border: 0;
    border-radius: 16px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.6),
      0 4px 14px rgba(23, 19, 42, 0.1);
  }

  .svv-events--grid .svv-events__items {
    gap: u(1);
  }

  .svv-events--grid .svv-card {
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: var(--svv-glass-shadow);

    &:hover {
      background: rgba(255, 255, 255, 0.72);
    }

  }

  // base sizes the grid image for an edge-to-edge card; the inset card
  // would otherwise push it past the column
  .svv-events--grid .svv-card__media {
    width: 100%;
    min-height: 0;
    border: 0;
    border-radius: 16px;
  }

  .svv-events__state {
    border-color: rgba(23, 19, 42, 0.14);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.35);
  }

  // Overlays
  .svv-drawer,
  .svv-modal {
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
      inset 0 1px 0 #fff,
      0 30px 80px rgba(40, 20, 90, 0.25);
  }

  .svv-drawer {
    --svv-drawer-inset: #{u(0.75)};

    height: calc(100dvh - u(1.5));
    max-height: calc(100dvh - u(1.5));
    margin-block: var(--svv-drawer-inset);
  }

  .svv-drawer--right {
    margin-right: var(--svv-drawer-inset);
  }

  .svv-drawer--left {
    margin-left: var(--svv-drawer-inset);
  }

  .svv-drawer::backdrop,
  .svv-modal::backdrop {
    background: rgba(40, 20, 90, 0.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .svv-drawer__head,
  .svv-drawer__foot {
    background: rgba(255, 255, 255, 0.5);
    border-color: var(--svv-border);
  }

  .svv-drawer__hero {
    border-radius: 20px;
  }

  .svv-drawer__section,
  .svv-members__row,
  .svv-related li {
    border-color: var(--svv-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.45);
  }

  .svv-field__input {
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.7);
    border-color: rgba(23, 19, 42, 0.1);
  }

  .svv-stepper {
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);

    button {
      background: transparent;
    }
  }

  .svv-share__icon {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
  }

  .svv-share__link {
    border-radius: var(--svv-radius);
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.9);
  }

  @media (min-width: 864px) {
    .svv-share__link {
      border-radius: 999px;
    }
  }

  @include mobile {
    .svv-shell__header {
      position: static;
      margin: 0 12px 12px;
      padding: 10px;
      border-radius: 24px;
    }

    .svv-shell__content {
      margin: 0 12px;
      border-radius: 24px;
    }

    .svv-shell__strip {
      padding: 0 12px 12px;
      border-bottom: 0;
    }

    .svv-datestrip__chip {
      border-radius: 16px;
      border-color: var(--svv-glass-edge);
      background: var(--svv-glass);

      &.is-selected {
        border-color: var(--svv-text);
        background: var(--svv-text);
      }
    }

    .svv-card__share {
      color: var(--svv-text-muted);
    }

    .svv-events--list .svv-card {
      border-radius: 0;
    }

    .svv-events--grid .svv-card {
      padding: 4px;
      border-radius: 18px;
    }

    .svv-events--grid .svv-card__media {
      border-radius: 14px;
    }

    .svv-events--grid .svv-card__body {
      padding: 10px 10px 0;
    }

    .svv-events--grid .svv-card__action {
      padding: 10px;
    }
  }

  @container svv-shell (max-width: 544px) {
    .svv-shell__header {
      position: relative;
      top: auto;
      border-radius: 24px;
    }

    .svv-events--grid .svv-card {
      padding: 4px;
      border-radius: 18px;
    }
  }
}