.fs-block-popover {
  cursor: pointer;

  &:where(.is-text) {
    all: initial;
    display: inline-flex;
    align-items: center;
    font: inherit;
    color: inherit;
    cursor: pointer;
    gap: 0.25em;
  }
}

:where(.fs-block-popover__popover) {
  --color: var(--fs-blocks-color-white);
  --backdrop-color: rgba(11, 11, 11, 0.85);
  --bg-color: transparent;

  /* Closing direction; `:popover-open` overrides with the opening direction below. */
  --popover-ease: var(--fs-blocks-ease-in);
  --popover-duration: calc(var(--fs-blocks-duration) / 2);
}

.fs-block-popover__popover {
  isolation: isolate;
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  overflow-x: clip;
  z-index: 9999;

  &[hidden] {
    display: none !important;
  }

  &:popover-open {
    --popover-ease: var(--fs-blocks-ease-out);
    --popover-duration: var(--fs-blocks-duration);
  }

  &::backdrop {
    background: var(--backdrop-color);
    backdrop-filter: blur(var(--backdrop-blur, 0));
    opacity: 0;
    transition:
      opacity var(--popover-duration) var(--popover-ease),
      display var(--popover-duration) var(--popover-ease) allow-discrete,
      overlay var(--popover-duration) var(--popover-ease) allow-discrete;
  }

  &:popover-open::backdrop {
    opacity: 1;
  }

  @starting-style {

    &:popover-open::backdrop {
      opacity: 0;
    }
  }

  &.is-style-card {
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transition:
      opacity var(--popover-duration) var(--popover-ease),
      display var(--popover-duration) var(--popover-ease) allow-discrete,
      overlay var(--popover-duration) var(--popover-ease) allow-discrete;

    &:popover-open {
      display: flex;
      opacity: 1;
    }
  }

  @starting-style {

    &.is-style-card:popover-open {
      opacity: 0;
    }
  }
}

.fs-block-popover__content {
  position: relative;
  container-type: inline-size;
  contain: layout;
  min-height: 40px;
  color: var(--color);
  background: var(--bg-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size);
  padding: var(--padding);
}

.fs-block-popover__popover:where(.is-style-card) {
  --bg-color: var(--fs-blocks-color-background);
  --color: var(--fs-blocks-color-foreground);

  .fs-block-popover__content {
    margin: auto;
    width: 100%;
    max-width: 900px;
    transform: translateY(-25px);
    transition: transform var(--popover-duration) var(--popover-ease);
    box-shadow: var(--box-shadow, var(--fs-blocks-shadow-1));
  }

  &:popover-open .fs-block-popover__content {
    transform: translateY(0);
  }

  @starting-style {

    &:popover-open .fs-block-popover__content {
      transform: translateY(-25px);
    }
  }
}

.fs-button.fs-block-popover__close {
  --foreground-color: var(--fs-blocks-color-white);

  position: fixed;
  top: 0.5em;
  right: 0.5em;
  z-index: 100;
}

/* Add some space between popover buttons */
:where(:not(.fs-flex)) > .fs-block-popover:where(:not(.is-expanded, :last-child, :only-child)) {
  margin-inline-end: var(--fs-blocks-spacing-sm);
}