.Popup {
  --Page-headerBottom: var(--page-header-h);
  --Popup-gap: 0px;

  @apply h-auto bg-white shadow-lg;
}

.Popup-content {
  @apply size-full;
}

.Popup-content > .frame {
  > .Widget {
    @apply border-none;

    > .TC > .TabBar {
      @apply -mx-4;
    }
  }

  > .Widget-controls:empty {
    @apply hidden;
  }
}

.Popup:not(.is-visible) {
  @apply z-[-1];
}

.Popup-close {
  @apply btu-button btu-button-text-hidden btu-button-gray bg-white before:btu-icon before:btu-icon-x hover:bg-gray-100;
}

/* Hide full-width "Back" bar in favor of the close popup "X" icon */
.Popup-heading {
  @apply hidden;
}

.Popup.is-local {
  @apply fixed h-auto scale-y-0 overflow-auto rounded-lg border border-gray-200;

  &[data-tether-rx='l'] {
    @apply left-[--Tether-rl] right-auto;

    > .Popup-content {
      @apply max-w-[calc(100vw-var(--Tether-rl)-var(--Popup-gap))];
    }
  }

  &[data-tether-rx='r'] {
    @apply left-auto right-[calc(100vw-var(--Tether-rl)-var(--Tether-rw))];

    > .Popup-content {
      @apply max-w-[calc(var(--Tether-rl)+var(--Tether-rw)-var(--Popup-gap))];
    }
  }

  &[data-tether-ry='t'] {
    @apply bottom-auto top-[calc(var(--Tether-rt)+var(--Tether-rh))] max-h-[calc(100dvh-var(--Tether-rt)-var(--Tether-rh)-var(--Popup-gap))] origin-top;

    > .Popup-content {
      @apply max-h-[calc(100dvh-var(--Tether-rt)-var(--Tether-rh)-var(--Popup-gap))];
    }
  }

  &[data-tether-ry='b'] {
    @apply bottom-[calc(100dvh-var(--Tether-rt))] top-auto max-h-[calc(100dvh-var(--Page-headerBottom)-var(--Popup-gap))] origin-bottom;

    > .Popup-content {
      @apply max-h-[calc(var(--Tether-rt)-var(--Page-headerBottom)-var(--Popup-gap))];
    }
  }
}

/* ----------
   Context-specific styles for framed-in UIs in popups... where should these go?
  ------------------------------------------------------------------------------ */

.Popup[name='siteSwitch'] > .Popup-content {
  @apply w-[22.3rem];
}

.frame[name='siteSwitch'] {
  form {
    @apply flex flex-col gap-2 pt-2;
  }

  .SearchInput {
    @apply -order-1 mx-4 w-auto;
  }

  .ComboInput {
    @apply mx-4 w-auto;
  }

  [name='siteSwitchResults'] {
    @apply flex flex-col border-t border-t-gray-200;

    &:has(.Pagination) .LinkTable {
      @apply border-b;
    }
  }

  .LinkTable {
    @apply py-2;

    > li {
      @apply rounded-none;

      > a {
        @apply px-4;
      }
    }
  }

  .Pagination {
    @apply order-1 my-3 me-4 ms-auto;
  }
}

/* Source Data Popup styles */
.Popup[name='contentMetadata'] {
  .Widget > .RCIG {
    @apply pb-6 pt-[58px];

    > .RCIG-expandAll {
      @apply top-2;
    }
  }

  /* If item has no inner content, hide the expand/collapse button */
  .RCIG-title:not(:has(~ .objectInputs:not(:empty))) {
    @apply after:hidden;
  }

  .RCIG-list {
    @apply mb-0;
  }

  .RCIG-item > .CIG {
    @apply pt-6;
  }

  .RCIG-item {
    @apply bg-gray-50;

    /* Grid accounts for 3 RCIG actions to right of divider by default: multisort, remove, more menu */
    @apply grid grid-cols-[auto]; /* minmax used to set the initial height of the RCIG-item to reduce shift while loading. */

    .repeatableForm {
      @apply -ml-2 flex flex-col gap-[15px];
    }

    .repeatableForm .metadataEntryWrapper span.displayKey {
      @apply blokk text-[0.75rem] text-[var(--color-gray5)];
    }

    .repeatableForm .metadataEntryWrapper span.displayValue {
      @apply text-[var(--color-black)];
    }

    &.toggleVisible:not(.is-collapsed.collapsed) .objectInputs {
      display: flex;
      @apply ps-6;
    }
  }

  /* ::before - item number | ::after - expand/collapse "button" */
  .RCIG-title {
    @apply ps-4;

    &::before {
      content: unset !important;
      @apply -ml-6 mr-2;
    }

    .RCIG-item.is-collapsed > & {
      @apply ps-1;
      &::before {
        @apply hidden;
      }
    }
    .RCIG-item.is-collapsed > &,
    .RCIG-item.is-gridItem > & {
      @apply ps-4;
    }
  }
}

/* Query Field Popup styles */
.Popup[name='queryField'] {
  .Popup-content {
    @apply grid [grid-template-areas:'title'_'form'_'actions'] ![grid-template-rows:auto_1fr_auto];
  }

  .SearchWidget-form {
    @apply [grid-area:form];
  }

  .ActionBar {
    @apply [grid-area:actions];
  }
}

.Popup-marker {
  @apply hidden;
}

/* Popovers have light-dismissal behavior, so we don't need a close button. */
.Popup[popover] {
  @apply p-0 [transition:transform_0.6s_cubic-bezier(0.9,0,0.1,1)_allow-discrete];
  .Popup-close {
    @apply hidden;
  }
}

.Popup[popover].is-ready {
  @apply scale-0;

  &.is-visible {
    @apply scale-100;
  }
}

/* Guide Field Popup styles */
.Popup-content .Guide-controls {
  @apply relative right-[unset] top-[unset] ms-auto;

  .Guide-close {
    @apply hidden;
  }
}

/* ToolUserWorksInProgress & ToolUserSharedPreviews popups */
/* TODO: add WIPs selector here */
.frame[name='sharedPreview'],
.frame[name='wip'] {
  @apply h-full;
}

.Popup.is-local[data-popup-source-class='rte2-toolbar-add-table']
  .Popup-content {
  @apply max-w-[unset];

  .plugin-popup {
    @apply col-span-full;
  }
}

.Popup[name='lookingGlass'] ul:has(.LookingGlass-actions) {
  @apply justify-center;
}

.Popup[data-popup-source-class~='CollectionList-item-edit']
  .icon-action-delete {
  @apply -ms-4;
}

/* Hide the original title in popups because we're cloning it into a new location.
  [data-tab](which are btu-cig-cluster titles), ContentEdit-title, and more
  are exempt from being hidden because those exist in the right location. */
.plugin-popup:not(
    :has(.Page-loginDialog),
    .SearchWidget,
    .Widget[name='Contextual-comments'],
    .Widget[name^='objectId-' i]:has(.Admin > :where(.Admin-nav, .Admin-main)),
    [name='notifications']
  ) {
  :where(h1, h2, h3, .Widget-title, .Guide-title):not(
      [data-tab],
      .ContentEdit-title,
      .ContentEdit-revisionInfo,
      .ContentEditDrawer-header .Widget-title,
      .Diff-message,
      .SearchFields-heading,
      .SearchFields-subheading,
      .StyleEmbeddedContent-heading,
      .AuthorPersona-title,
      .ContentEdit-workflowTitle,
      .PrePublishPopup .Widget-title,
      .Widget.is-collapsible .Widget-title
    ) {
    @apply !hidden;
  }
  /* Show headings inside certain frames or forms */
  :is(.PostPublish-form)
    :where(h1, h2, h3, .Widget-title, .Guide-title):not(
      [data-tab],
      .ContentEdit-title,
      .Diff-message,
      .SearchFields-heading,
      .SearchFields-subheading
    ) {
    @apply ![display:unset];
  }
}

.plugin-popup :where(.SearchWidget-title) {
  @apply !hidden;
}

/* Reset the position of the popover so it can be repositioned properly with Tether coordinates.
  Without these resets, setting 'bottom' or 'right' won't actually work.
  rtl:ignore — Tether sets physical left/right/top/bottom coordinates in JS (already
  direction-aware), so postcss-rtlcss must not flip these left/right resets; flipping
  re-adds left:auto and mispositions native popovers (e.g. ContentEdit-controlsList). */
/*rtl:begin:ignore*/
[popover] {
  &[data-tether-ry='t'] {
    bottom: unset;
  }
  &[data-tether-rx='r'] {
    left: unset;
  }
  &[data-tether-ry='b'] {
    top: unset;
  }
  &[data-tether-rx='l'] {
    right: unset;
  }
}
/*rtl:end:ignore*/

.Popup[name='contentImages'] {
  .frame[name='contentImages'] {
    @apply py-6;

    .Widget > btu-toggleable {
      @apply pb-6;
    }
  }
}

.Popup[name^='conversation-'],
.Popup[name='toolUserSaveSearch'] {
  @apply [--popup-h:auto];
}

/* Available schedules popup */
.frame[name='scheduleList'] {
  ul {
    @apply col-span-full px-2 py-4;
  }

  li {
    @apply flex rounded-lg;

    &:has(> a:hover) {
      @apply bg-gray-100;
    }

    > a {
      @apply my-2 !blokk w-full truncate px-2 text-sm text-gray-700 no-underline;
    }
  }
}

/* Authorship widget popup */
.Popup[name='queryGroupingDataSupplierOverlayToolPage']:not([popover])
  > .Popup-content {
  @apply grid-rows-[max-content_1fr_auto];

  .Widget-title {
    @apply col-[1/2] row-[1/2];
  }

  .Popup-close {
    @apply z-[9] col-[2/3] row-[1/2];
  }
}

.frame[name='queryGroupingDataSupplierOverlayToolPage'] {
  @apply contents;

  .Widget {
    @apply col-span-full row-span-full grid-rows-subgrid;

    /* Prevents elements from taking up space in first row */
    :is(form, .Widget-controls) {
      @apply contents;
    }

    .Link {
      @apply btu-button btu-button-fill-none btu-button-gray btu-button-sm absolute right-[4.25rem] top-[1.38rem] z-10 w-max btu-button-container-none before:btu-icon before:btu-icon-file-input;
    }

    .pagination {
      @apply my-[22px] justify-self-end [grid-row:3/4];

      .ComboInput:not([aria-expanded='true']) {
        @apply border-transparent;
      }

      &:has(.next) .ComboInput {
        @apply rounded-e-none;
      }

      &:has(.previous) .ComboInput {
        @apply rounded-s-none;
      }
    }

    .DT-wrapper {
      @apply col-[fullbleed-start/fullbleed-end] overflow-y-auto border-t [grid-row:2/3];

      table tbody th:first-child {
        @apply bg-transparent text-sm;
      }
    }
  }
}

/* Author persona preview sample popup */
.Popup[name='previewSample'] .Widget {
  --space: 1rem;

  @apply h-full overflow-y-auto bg-gray-100;
}
