/* ─── Popover entrance & exit animation ─────────────────────────────────── */

[data-blok-popover][popover] {
  transition: display 120ms allow-discrete, overlay 120ms allow-discrete;
}

[data-blok-popover-container] {
  transform-origin: top left;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}

/* Keep chrome unlayered so host resets cannot erase it. The @theme inline
   color alias does not exist at runtime; use --blok-popover-bg instead. */
[data-blok-popover-container] {
  border-radius: var(--radius-xl);
  background-color: var(--blok-popover-bg);
}

[data-blok-popover][data-blok-popover-open-top='true'] [data-blok-popover-container] {
  transform-origin: bottom left;
}

[data-blok-popover][data-blok-popover-open-left='true'] [data-blok-popover-container] {
  transform-origin: top right;
}

[data-blok-popover][data-blok-popover-open-top='true'][data-blok-popover-open-left='true']
  [data-blok-popover-container] {
  transform-origin: bottom right;
}

[data-blok-popover]:not([data-blok-popover-opened='true']) [data-blok-popover-container] {
  transform: scale(0.98);
}

/* Inline toolbar appears instantly — no entrance animation.
   Direct child only, so nested inline popovers keep their animation. */
[data-blok-popover-inline] > [data-blok-popover-container],
[data-blok-popover-inline]:not([data-blok-popover-opened='true']) > [data-blok-popover-container] {
  transition: none;
  transform: none;
}

[data-blok-popover-item][data-blok-focused='true'] {
  outline: 2px solid var(--blok-text-secondary);
  outline-offset: -2px;
}

/* Search keeps full labels; the unfiltered menu groups native controls into tiles. */
[data-blok-popover-container]:not(:has(> [data-blok-testid='popover-search-field'] > input:not(:placeholder-shown))) {
  > [data-blok-popover-items]:has(> :is([data-blok-header-level], [data-blok-convert-item])) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--blok-space-1);

    > * {
      grid-column: span 6;
    }

    > [data-blok-convert-item] {
      grid-column: span 3;
      min-width: 0;
      min-height: 40px;
      max-height: none;
      margin: 0;

      > [data-blok-popover-item-title] {
        font-size: 12px;
        font-weight: 550;
      }

      @media (max-width: 650px) {
        min-height: 44px;
      }
    }

    &:has(> [data-blok-convert-group]) {
      gap: var(--blok-space-0-75);

      > [data-blok-convert-group]:not([data-blok-convert-level='']) {
        --_blok-convert-size-limit: 19px;
        position: relative;
        grid-column: span 2;
        height: 65px;
        padding: 0 var(--blok-space-2);
        justify-content: flex-start;
        border-radius: var(--blok-space-1-75);
        background-color: transparent;

        &[data-blok-convert-level='1'] { --_blok-convert-size: 19px; --_blok-convert-weight: 750; }
        &[data-blok-convert-level='2'] { --_blok-convert-size: 17px; --_blok-convert-weight: 700; }
        &[data-blok-convert-level='3'] { --_blok-convert-size: 16px; --_blok-convert-weight: 650; }
        &[data-blok-convert-level='4'] { --_blok-convert-size: 15px; --_blok-convert-weight: 600; }
        &[data-blok-convert-level='5'] { --_blok-convert-size: 14px; --_blok-convert-weight: 550; }
        &[data-blok-convert-level='6'] { --_blok-convert-size: 13px; --_blok-convert-weight: 500; }

        > [data-blok-popover-item-title] {
          min-width: 0;
          margin: 0;
          font-size: min(var(--_blok-convert-size), var(--_blok-convert-size-limit));
          font-weight: var(--_blok-convert-weight);
          line-height: 1.2;
          letter-spacing: -0.025em;
          white-space: nowrap;
        }

        [data-blok-convert-preview] {
          display: inline;
        }

        [data-blok-convert-full-title],
        > [data-blok-popover-item-icon] {
          display: none;
        }

        &[data-blok-convert-group='toggle-heading'] {
          --_blok-convert-size-limit: 16px;

          &::before {
            content: '▸' / '';
            flex-shrink: 0;
            margin-inline-end: var(--blok-space-1);
            color: var(--blok-text-secondary);
            font-size: 12px;
            line-height: 1;
          }
        }

        @media (hover: hover) {
          &:hover {
            background-color: var(--blok-item-hover-bg);
          }
        }

        &:is([data-blok-focused='true'], [data-blok-force-hover], [data-blok-popover-item-active]) {
          color: var(--blok-text-primary);
          background-color: var(--blok-item-hover-bg);
        }

        @media (max-width: 480px) {
          --_blok-convert-size-limit: 17px;
          padding-inline: var(--blok-space-1-75);

          &[data-blok-convert-group='toggle-heading'] {
            --_blok-convert-size-limit: 15px;
          }
        }

        @media (max-width: 360px) {
          --_blok-convert-size-limit: 16px;
          padding-inline: var(--blok-space-1);

          &[data-blok-convert-group='toggle-heading'] {
            --_blok-convert-size-limit: 14px;
          }
        }
      }

      /* Columns may follow a partial group without a separator. */
      > [data-blok-convert-group] + [data-blok-convert-item]:not([data-blok-convert-group]) {
        grid-column-start: 1;
      }
    }

    > [data-blok-header-level] {
      grid-column: span 1;
      min-width: 0;
      height: 40px;
      max-height: none;
      margin: 0;
      padding: 0;
      justify-content: center;

      > [data-blok-popover-item-title] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }

      > [data-blok-popover-item-icon] {
        margin: 0;
      }

      svg {
        width: 20px;
        height: 20px;
      }
    }
  }
}

/* Scope the denser chrome to block settings and conversion, not tool pickers. */
:is([data-blok-testid='block-tunes-popover'] > [data-blok-popover-container], [data-blok-popover-container]:has(> [data-blok-popover-items] > [data-blok-convert-item])) {
  padding-inline: var(--blok-space-2);

  @media (min-width: 651px) {
    max-height: min(var(--max-height), calc(100dvh - 16px));
  }

  > [data-blok-testid='popover-search-field'] {
    margin-top: var(--blok-space-2);
    background: transparent;
    border-color: var(--blok-popover-border);

    &:focus-within {
      border-color: var(--blok-text-secondary);
    }
  }

  > [data-blok-popover-items] {
    padding-block: var(--blok-space-1) var(--blok-space-1-5);
    row-gap: var(--blok-space-0-5);

    > [data-blok-popover-item]:not([data-blok-hidden]) {
      min-height: 32px;
      max-height: none;
      margin-block: 0;
      border-radius: var(--blok-space-1-5);

      &:not([data-blok-header-level], [data-blok-convert-group]) {
        padding-block: var(--blok-space-1);

        > [data-blok-popover-item-icon] {
          margin-inline-end: var(--blok-space-2);
        }
      }

      > [data-blok-popover-item-secondary-title] {
        padding-inline-start: var(--blok-space-3);
        font-size: 11px;
      }
    }

    > [role='separator'] {
      padding-block: var(--blok-space-1);
    }

    > [data-blok-item-name='header-levels'] > div {
      padding: var(--blok-space-0-5) var(--blok-space-2);
      line-height: 16px;
    }

    /* Keep metadata legible despite the inline scroll-reel distortion. */
    > [data-blok-item-name='edit-metadata']:not([data-blok-hidden]) {
      transform: none !important;
      opacity: 1 !important;
    }

    > [data-blok-item-name='edit-metadata'] > div {
      padding: var(--blok-space-0-5) var(--blok-space-2);
      font-size: 11px;
      line-height: 14px;
    }
  }
}

/* The inline toolbar sets width on the element. */
[data-blok-popover-container]:has(> [data-blok-popover-items] > [data-blok-convert-group]) {
  width: min(392px, calc(100vw - 16px)) !important;
  min-width: 0;
  max-height: min(520px, calc(100dvh - 16px));
}

[data-blok-popover-container]:has(> [data-blok-popover-items] > [data-blok-convert-item]) > [data-blok-testid='popover-search-field'] {
  display: flex;
  align-items: center;
  min-height: 47px;
  margin: 0;
  padding-inline: var(--blok-space-2);
  border: 0;
  border-bottom: 1px solid var(--blok-popover-border);
  border-radius: 0;

  &:focus-within {
    border-color: var(--blok-text-secondary);
  }
}

[data-blok-convert-preview] {
  display: none;
}

/* Hidden native items must leave no grid track behind. */
[data-blok-popover-items] > :is([data-blok-convert-item], [data-blok-item-name='convert-heading-tabs'])[data-blok-hidden] {
  display: none;
}

[data-blok-item-name='convert-heading-tabs'] {
  margin-block-end: 6px;

  [data-blok-popover-tabs] {
    display: flex;
    gap: var(--blok-space-6);
    margin-inline: var(--blok-space-1-5);
    border-bottom: 1px solid var(--blok-popover-border);
  }

  [role='tab'] {
    position: relative;
    min-width: 44px;
    min-height: 42px;
    padding: 11px 0 10px;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: var(--blok-text-secondary);
    font-size: 12px;
    font-weight: 550;
    line-height: 20px;
    cursor: pointer;
    touch-action: manipulation;

    &:is(:hover, [aria-selected='true']) {
      color: var(--blok-text-primary);
    }

    &[aria-selected='true']::after {
      position: absolute;
      content: '';
      inset-block-end: -1px;
      inset-inline: 0;
      height: 2px;
      border-radius: 2px;
      background: currentColor;
    }

    &:focus-visible {
      outline: 2px solid var(--blok-text-secondary);
      outline-offset: -2px;
    }

    @media (max-width: 650px) {
      min-height: 44px;
    }
  }
}

/* Built utilities are unlayered; beat their active, hover, and focus selectors. */
[data-blok-popover-items] > [data-blok-popover-item][data-blok-header-level][data-blok-popover-item-active] {
  color: var(--blok-text-primary);
  background-color: var(--blok-item-hover-bg);
  box-shadow: inset 0 0 0 1px var(--blok-popover-border);
}

/* Labelled choices may wrap in narrow menus or longer translations. */
[data-blok-convert-item]:is(:not([data-blok-convert-group]), [data-blok-convert-level='']) > [data-blok-popover-item-title] {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 650px) {
  :is([data-blok-testid='block-tunes-popover'] > [data-blok-popover-container], [data-blok-popover-container]:has(> [data-blok-popover-items] > [data-blok-convert-item]))
    > [data-blok-popover-items] > [data-blok-popover-item]:not([data-blok-hidden]) {
    min-height: 44px;
  }
}

/* ─── Inline link field: suggestion row & error reveal ──────────────────── */

/* Keyed off the visibility toggle (Tailwind `hidden` class / `hidden`
   attribute), so the reveal plays once when the element appears and never
   re-triggers while the user keeps typing. */
[data-link-suggestion]:not(.hidden),
[data-blok-link-tool-error]:not([hidden]) {
  animation: blok-link-reveal 140ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  [data-blok-popover-container],
  [data-blok-popover-item-icon-chevron-right] {
    transition: none;
    transform: none;
  }

  [data-link-suggestion]:not(.hidden),
  [data-blok-link-tool-error]:not([hidden]) {
    animation: none;
  }
}