/* The file sets up the basic grid structure for Widgets, establishing uniform horizontal spacing around the content inside it.
   This spacing can be adjusted for different use cases through a combination of one or more of the following:
    1) --space css variable for the Widget
    2) grid-column property and horizontal padding of individual components

   The file also sets the default styles for Widget-title & Widget-controls in both collapsible and noncollapsible widgets.

   Any use cases that need to overwrite these styles should be added to this file.
*/
.Widget {
  --Widget-padding: var(--gap-l);
  --space: theme(spacing.6); /* keep in sync with Revisions.css */

  @apply relative grid bg-white [grid-template-columns:[fullbleed-start]_var(--space)_[content-start]_1fr_auto_[content-end]_var(--space)_[fullbleed-end]];

  > *:not(.ContentEdit-preview) {
    @apply [grid-column:content-start_/_content-end];
  }
}

.Widget-title {
  @apply btu-heading-5 sticky top-0 z-10 overflow-x-clip text-ellipsis whitespace-nowrap border-b border-b-gray-200 bg-white py-3.5 text-gray-900;

  .Label {
    @apply inline-flex;
  }
}

.Widget-controls {
  @apply sticky top-0 z-[11] flex items-center gap-2 border-b border-b-gray-200 bg-inherit empty:hidden;
}

.Widget-controls.is-locked {
  @apply !hidden;
}

/* By default widget titles take up the entire width of widget grid
 * Note: There are use cases where Widget-title is present outside of Widget (e.g ContentSummary popup)
*/
.Widget .Widget-title {
  @apply px-[--space] [grid-column:fullbleed-start_/_fullbleed-end];
}

.Widget:not(.is-collapsible) {
  &:has(.Widget-controls:not(:empty)) > .Widget-title {
    @apply pe-0 [grid-column:fullbleed-start_/_span_2];
  }

  /* Widget controls appear on the top right corner of the widget on the same row as title */
  .Widget-controls {
    @apply pe-[--space] [grid-column:span_2_/_fullbleed-end];
  }

  .Admin-leftNav-controls {
    @apply ps-2;
  }

  .Admin-main & {
    /* When Widget-controls is moved inside form by JavaScript, make form participate in grid */
    form:has(> .Widget-controls) {
      @apply contents;
    }

    /* For Admin pages pin controls to row 1 so they align with the title */
    .Widget-controls:has(> button:not(.FormFilter-icon)) {
      @apply bg-white [grid-row:1];
    }
  }
}

.Widget-actionsToggle {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-ellipsis;
}

.Widget-actionsList {
  @apply Dropdown z-[10000];

  [role='menuitem'] {
    @apply Dropdown-item;
  }
}

.Widget-actions.is-open {
  .Widget-actionsList {
    @apply Dropdown-is-open;
  }

  .Widget-actionsToggle {
    @apply btu-button-pressed;
  }
}

.Widget
  :is(
    .widget-urls.is-readOnly,
    .widget-urlsRepeatable.is-readOnly,
    .ContentEditSites-owner.is-readOnly,
    .ContentEditSites-access.is-readOnly
  ) {
  @apply pointer-events-none select-none opacity-75;
}

.Widget .is-readOnly .UrlsWidget-itemLabel a,
.widget .is-readOnly .RCIG-title:after,
.widget .is-readOnly .ContentSummary-info,
.widget .is-readOnly .ContentSelector-edit {
  @apply pointer-events-auto cursor-pointer;
}

/* Collapsible widgets where widget titles have expand/collapse controls (e.g. Right rail publishing tools)
** Note: In this use case Widget-controls are children of Widget-title instead of their sibling
*/
.Widget.is-collapsible {
  @apply h-[min-content];

  .Widget-title {
    @apply cursor-pointer py-2 hover:bg-gray-100 focus-visible:ring-0;
  }

  .Widget-expand {
    @apply relative inline-flex w-full items-center gap-2 focus:ring-0;
  }

  .Widget-title:has(.Widget-expand:focus-visible) {
    @apply ring-offset-4 ring-1 ring-inset ring-primary-600 ring-offset-primary-100 more-contrast:ring-4;
  }

  .Widget-controls {
    @apply order-2 ms-auto border-b-0;
  }

  .Widget-collapse {
    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-chevron-up before:transition-transform;
  }
}

.Widget.is-collapsed {
  @apply overflow-clip border-b-0 pb-0;

  .Widget-collapse {
    @apply before:rotate-180;
  }

  > div,
  > table {
    @apply hidden;
  }
}

.Widget.is-error > .Widget-title {
  @apply text-error-600;

  .Widget-expand {
    @apply after:btu-icon after:btu-icon-circle-alert after:text-error-600;
  }
}

.Widget-heading {
  @apply py-2 text-sm font-semibold text-gray-900;
}

.Widget-restoreButton {
  @apply btu-button btu-button-text-hidden btu-button-gray before:btu-icon before:btu-icon-archive-restore;
}

/* Customizing spacing and widget styles for different use cases */
.Widget > form,
.Widget > form > .fixedScrollable {
  &:has(> .TC, > .CIG, > .SearchInput, > .ActionBar) {
    @apply grid grid-cols-subgrid [grid-column:fullbleed-start_/_fullbleed-end];

    & > :not(.ActionBar, .Widget-controls, .Message) {
      @apply px-0 [grid-column:content-start_/_content-end];
    }
  }

  > .ActionBar {
    @apply mt-6;
  }
}

/* Provide a matching gap at the bottom of scrollable widgets with a CIG at the end */
.Widget > .StandardForm .CIG:not(+ .ActionBar),
.Widget > form > .fixedScrollable > .CIG:last-child {
  @apply pb-[--CIG-padding];
}

/*
  Occupy more space when a Widget has a message which isn't followed by any other elements.
  eg: Open the notification popup with no notifications.
 */
.Widget .Message:not(:has(+ *)) {
  @apply my-4 rounded-lg border;
}

/* Tabs, Messages & ActionBar components inside Widgets should take up the entire width of widget
   These selectors have been copied down from v4 styles
*/
.Widget,
.Widget > form,
.Widget > form > .fixedScrollable {
  > .TabBar,
  > .Message:has(+ *),
  > * > .Message:has(+ *) {
    @apply [grid-column:fullbleed-start_/_fullbleed-end];
  }

  > .TC,
  > .CIG,
  > .SearchInput {
    @apply px-0 [grid-column:content-start_/_content-end];
  }

  > .CIG > .TabBar {
    @apply [--pull-inline:var(--space)];
  }

  > .ActionBar {
    @apply border-b-0 px-[--space] [grid-column:fullbleed-start_/_fullbleed-end];
  }
}

/* Data Tables inside a widget (Eg: Admin > About page) */
.Widget > table.DT {
  @apply table-fixed [grid-column:fullbleed-start_/_fullbleed-end];
  th,
  td {
    @apply overflow-hidden text-ellipsis text-nowrap;
  }
}

/* Profile Dropdown popup widget */
.Widget:has(.ProfileDropdown-items) {
  --space: theme(spacing.4);

  > .ProfileDropdown-items {
    @apply [grid-column:fullbleed-start_/_fullbleed-end];
  }

  > .Widget-title {
    @apply py-3;
  }
}

/* Notifications Widget */
.Widget.ToolUserNotifications {
  --space: theme(spacing.4);
  @apply w-[360px];
}

/* Content edit right rail collapsible widget styles */
.ContentEdit-right :where(.Widget) {
  --space: theme(spacing.4);

  .Widget-title {
    @apply text-sm;
  }

  &.is-collapsible {
    .Widget-collapse {
      @apply size-7 p-1;
    }

    &:not(.is-collapsed) .Widget-title {
      @apply bg-primary-50 hover:bg-gray-100;
    }

    &:not(.is-collapsed):not(.is-error) .Widget-title {
      @apply text-primary-800 hover:text-gray-900;
    }
  }
}

/* Looking Glass Widget styles */
.Widget[name='lookingGlass'] {
  .Widget-title {
    @apply flex items-center;
  }

  img {
    @apply my-6;
  }

  ul:has(.LookingGlass-actions) {
    @apply m-0 px-[--space] [grid-column:fullbleed-start_/_fullbleed-end];
  }
}

/* Module Picker Widget styles */
.Widget[name='AddEmbeddedContent'] {
  > .StyleEmbeddedContent {
    @apply col-span-full;
  }
}

/* Date Widget */
.Widget > .DateStringCalendar {
  @apply contents;

  > * {
    @apply [grid-column:content-start_/_content-end];
  }

  > .DateStringCalendarDate,
  > .DateStringCalendarForm {
    @apply px-4 [grid-column:fullbleed-start_/_fullbleed-end];
  }
}

/* Diff Widget */
.Widget[name='diff'] > * {
  @apply col-span-full;
}

/* Conversations Widget */
.Widget:has(.Conversation-posts) {
  .Widget-title {
    @apply px-4;
  }
}

/* When a Widget is a child of a Widget it should go full width */
.Widget > .Widget {
  @apply col-span-full;
}

/* Conversation Edit Popup */
.Widget[name='conversation-edit-post'] {
  &:has(.Widget-controls) {
    .Widget-title {
      @apply pe-16;
    }
  }

  .Widget-controls {
    @apply z-10;
  }

  .Widget-actions {
    @apply fixed left-[calc(var(--Tether-rl)+var(--Tether-rw)-(var(--icon-size)*2)-theme(spacing.7)-theme(spacing.3))];
  }
}

.Admin-nav :where(.Widget),
.ContentEdit-right :where(.Widget) {
  --space: theme(spacing.4);

  > .Message:has(+ *) {
    @apply rounded-lg border [grid-column:content-start_/_content-end];
  }
}

.Admin-main.is-miller :where(.Widget > .BulletedList) {
  @apply [grid-column:fullbleed-start_/_fullbleed-end];

  > li {
    @apply px-[--space];
  }
}

.Popup :where(.Widget:has(> .Admin)) {
  --space: 0rem;
}

/* Search Widget styles */
btu-widget.SearchWidget-moreFilters {
  --space: 0rem;
}

btu-widget.SearchWidget-recent,
btu-widget.SearchWidget-saved,
btu-widget.SearchWidget-create {
  --space: 1rem;
}

/* Content Reporting Widget */
.ContentReportingWidget .Widget {
  @apply [grid-template-columns:[fullbleed-start]_var(--space)_[content-start]_1fr_auto_auto_[content-end]_var(--space)_[fullbleed-end]];

  .ContentReporting-runLink {
    @apply [grid-column:3] [grid-row:1];
  }

  .Widget-controls {
    @apply ps-2;
  }
}

/* Advanced Query Field Popup widget */
.Widget.SearchWidgetAdvanced {
  @apply grid-cols-[[fullbleed-start]_var(--space)_[content-start]_auto_1fr_[content-end]_var(--space)_[fullbleed-end]];

  > form {
    > .ComboInput {
      @apply col-span-1 col-start-[content-start];
    }

    > button.Link {
      @apply col-span-1 col-end-[content-end];
    }
  }
}

/* Search Select/Hide Fields Popup Widget */
.Widget.SearchFields .SearchFields-tab-container {
  @apply [grid-column:fullbleed-start/fullbleed-end];
}

/* ContentTools Popup widget */
.Widget.ContentTools {
  --space: 1rem;
}

/* WIPs & SharedPreviews popups */
.ToolUserWorksInProgress.Widget,
.ToolUserSharedPreviews.Widget {
  --space: 0.5rem;
}

/* TwoFactor Auth Popup */
.Widget[name='toolUserTfa'] {
  .QRCode {
    @apply text-md;
  }

  .QRCode img {
    @apply my-6 aspect-square place-self-center;
  }
}

/* Pre-Publish Popup Widget */
.Widget.PrePublish {
  --space: 0;

  :is(.fixedScrollable) {
    @apply max-h-full overflow-y-auto px-6;
  }

  > .Popup-content {
    @apply overflow-y-auto;
  }
}

.fixedScrollable .CIG-row {
  @apply after:left-[calc(1px_-_var(--CIG-padding))];
}

/* ContentEditDrawer Widget (The Shelf) */
.Widget .ContentEditDrawer-widget {
  @apply col-span-full;
}

/* TableSizer Widget */
.Widget.TableSizer {
  --space: 0.75rem; /* 0.25rem already added from border-spacing in TableSizerPopup.css */

  @apply bg-gray-50;
}

/* Translations Widget */
.Widget[data-internal-name='com.psddev.translation.page.TranslationTab'] > * {
  @apply col-span-full;
}

/* Mail Publishing Widget */
.Page[data-href*='/cms/admin/mail-publishing'] .Page-content > .Widget {
  @apply h-full [grid-template-rows:auto_1fr_auto];

  > * {
    @apply col-span-full;
  }
}

/* Simple fullscreen widgets (e.g. Slack Verification) */
.Page-content > .Widget:not(~ .Widget) {
  @apply h-full content-start;

  &:has(> .Widget-title + .Message + .ActionBar) {
    @apply grid-rows-[auto_auto_1fr];

    > .Message {
      @apply col-[content-start/content-end];
    }

    > .ActionBar {
      @apply self-end;
    }
  }
}

/* Calendar Event summary widget */
.CalendarEventSummary.Widget > .ContentSummary-content {
  @apply col-span-full;
}

.Popup[name='CalendarEventSummaryOverlay'] .Widget-title {
  @apply justify-between;
}

/* Calendar Color Manage widget */
.Widget.CalendarColorManagerPage {
  @apply h-full grid-rows-[1fr_max-content];

  > form:has(.TC) {
    @apply row-span-full [grid:subgrid/subgrid];

    > .objectInputs.TC {
      @apply col-span-full content-baseline border-b !px-[--space] pb-6;
    }

    > button {
      @apply btu-button btu-button-primary my-4 ms-auto !px-[--space];
    }
  }
}

/* Admin pages with full screen search view */
.Widget.SearchPage {
  @apply SearchWidget;

  > .Widget-title {
    @apply ![grid-area:title];
  }

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

  .SearchResult-fullscreen {
    @apply hidden;
  }
}

/* When the upload widget is processing the upload, prevent user interactions. */
.Widget[name='uploadFiles'] {
  &.loading {
    @apply !overflow-clip;
    form {
      @apply pointer-events-none select-none blur-[1px] grayscale-[50%];
      button[name='action-upload'] {
        @apply btu-button-disabled;
      }
    }
  }
}

/* GraphQL Widget */
.Widget.GraphQL-widget > * {
  @apply col-span-full;
}

/* Site Switcher Widget */
.frame[name='siteSwitch'] .Widget > * {
  @apply col-span-full;
}

.Widget[name='conversation-reply'] {
  @apply grid-rows-[auto_1fr];
}

/* External Import Widget */
.ExternalItemImport .Widget > form {
  > h1 {
    @apply hidden;

    + .Message ~ .ActionBar {
      @apply mt-0 border-t-0;
    }
  }
}

/* View scheduled events popup */
.Widget.ScheduleEventsList {
  table {
    @apply col-span-full;
  }

  /* make pagination here match dashboard widget pagination */
  .pagination {
    @apply order-1 my-[22px] ms-auto;

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

/* Truncate the dialog heading for the schedule events popup.
   Override display:flex to block so text-overflow:ellipsis renders. */
dialog:modal
  .Popup-content:has(.ScheduleEventsList)
  > :where(.Widget-title, h1) {
  @apply blokk truncate;
}

.Widget-filters,
.Widget-filter {
  @apply flex items-center;
}

.Widget-filters {
  @apply border-b border-b-gray-200 bg-gray-50 px-[--space] py-3 ![grid-column:fullbleed-start/fullbleed-end];
}

.Widget-filter {
  @apply z-0 flex-row-reverse;
}

.Widget-filterLabel {
  @apply text-sm font-medium;
}

/* Developer Bulk Operations Page */
.Widget.DeveloperBulkOperations {
  > ul li {
    @apply py-1;
  }

  > ul a {
    @apply text-sm;
  }
}
