html::view-transition-group(dashboard-widget) {
  @apply [animation-duration:500ms] [animation-timing-function:cubic-bezier(0.9,0,0.1,1)];
}

html::view-transition-old(dashboard-widget) {
  @apply opacity-0;
}

html::view-transition-new(dashboard-widget) {
  @apply animate-widget-maximize-fade-in;
}

.DashboardWidget {
  --margin: theme(padding.4);

  @media (min-width: theme(screens.sm)) {
    --margin: theme(padding.6);
  }

  @apply relative grid items-center overflow-clip rounded-2xl border border-gray-300 bg-white [grid-template-columns:[fullbleed-start]_var(--margin)_[main-start]_1fr_[inner-buffer]_auto_[main-end]_var(--margin)_[fullbleed-end]] before:h-[1px] before:bg-gray-200 before:[grid-column:fullbleed-start/fullbleed-end];

  th.hasComboInput {
    @apply flex;

    .ComboInput {
      @apply ms-2 grow;
    }
  }

  .LinkList-wrapper,
  .DT-wrapper {
    @apply h-full overflow-y-auto border-t border-t-gray-200 [grid-column:fullbleed-start/fullbleed-end] last:mb-4;
  }

  > table {
    @apply col-span-full border-t border-t-gray-200 last:mb-4;
  }

  > .table {
    @apply contents;
  }

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

  .PR {
    @apply contents;

    > form {
      @apply grid [grid-column:fullbleed-start/fullbleed-end] [grid-template-columns:subgrid] [grid-template-rows:1fr_auto_auto];
    }
  }

  .DashboardWidget-pagination {
    @apply ms-auto [grid-column:main-start/main-end] empty:hidden;
  }

  .ActionBar {
    @apply border-b-0 [grid-column:fullbleed-start/fullbleed-end];
  }

  .Message {
    @apply rounded-lg border [grid-column:main-start/main-end] last:mb-[--margin] [&:has(+_.DashboardWidget-controls)]:mb-[--margin];
  }

  .DashboardWidget-title + .Message,
  .DashboardWidget-maximize + .Message {
    @apply mt-[var(--margin,theme(spacing.6))];
  }

  ul.LinkTable {
    @apply [grid-column:fullbleed-start/fullbleed-end];

    > li {
      @apply rounded-none border-b border-gray-200 last:border-b-0;

      &:has(> a:focus-visible) {
        @apply ring-inset;
      }
    }

    > li > a {
      @apply my-4 px-[--margin];
    }

    &:last-child > li:last-child:has(> a:focus-visible) {
      @apply rounded-b-2xl;
    }
  }

  .LinkList-wrapper,
  .LinkTable.is-scrollable {
    @apply btu-scrollshadow-25 pb-6 before:absolute before:row-start-2 before:content-[--whitespace] after:absolute after:row-start-2 after:content-[--whitespace];

    &:has(
        + :where(
            .DashboardWidget-pagination:not(:empty),
            + .Actionbar:not(:empty)
          )
      ) {
      @apply pb-0; /* remove the bottom padding since the pagination or action bar will handle it */
    }
  }

  > form {
    @apply my-4;
  }

  > .frame {
    @apply grid grid-cols-subgrid [grid-column:fullbleed-start/fullbleed-end];
  }

  > * {
    @apply [grid-column:main-start/main-end];
  }
}

.DashboardRow-cell.is-maximized {
  @apply grid;
}

/* Add a backdrop behind the maximized widget */
.transition-backdrop {
  @apply before:absolute before:inset-0 before:z-20 before:backdrop-blur before:transition-all before:duration-300 before:ease-out before:[background-color:theme(backdropColor.dialog)];
}

@starting-style {
  .transition-backdrop {
    @apply before:opacity-0 before:[backdrop-filter:blur(0px)];
  }
}

.DashboardRow-cell.is-maximized .DashboardWidget {
  @apply max-h-[calc(100dvh_-_theme(spacing.8))] w-[calc(100vw_-_theme(spacing.8))] place-self-center overflow-auto shadow-lg;
}

button.DashboardWidget-maximize {
  @apply btu-button btu-button-gray row-start-1 justify-self-end bg-white btu-button-container-none [grid-column:inner-buffer/main-end] before:btu-icon before:btu-icon-maximize-2;
}

/* Toggle the icon button to show minimized state */
.DashboardRow-cell.is-maximized button.DashboardWidget-maximize {
  @apply btu-button-pressed before:btu-icon-minimize-2;
}

.DashboardRow-cell.transition-dashboard-widget {
  @apply [view-transition-name:dashboard-widget];
}

/* "Quick Start" Widget styles */
.CreateNewWidget {
  @apply overflow-visible rounded-none border-none bg-transparent p-0 before:content-none;

  /* Configuration UI of Quick Start */
  &:has(> form) {
    @apply m-[--margin] overflow-clip rounded-2xl border border-solid border-gray-300 bg-white;
  }

  .DashboardWidget-controls a {
    @apply before:btu-icon-settings;
  }

  .CIG-row {
    @apply blokk;
  }

  .CIG-title {
    @apply hidden;
  }

  .LinkCarousel {
    @apply m-0 mb-1 pb-5;
  }

  .LinkCarousel-item {
    @apply aspect-[16_/_4] overflow-visible;
  }

  form:has(.CIG) {
    @apply m-0 grid grid-cols-subgrid [grid-column:fullbleed-start/fullbleed-end];

    .CIG {
      @apply px-0 [grid-column:main-start/main-end];
    }
  }
}

.DashboardWidget-title {
  @apply btu-heading-5 row-start-1 flex w-auto items-center justify-between whitespace-normal text-balance py-4 text-gray-900 [grid-column:main-start/inner-buffer] [&:has(a)]:py-2.5;

  /* Slightly larger padding on wider screens; reduce when title contains a control button */
  @media (min-width: theme(screens.sm)) {
    @apply py-5 [&:has(a)]:py-3.5;
  }

  a {
    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon;
  }
}

.DashboardWidget-controls {
  @apply row-start-1 flex w-auto items-center gap-2 [grid-column:inner-buffer/main-end];

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

  > form button {
    @apply btu-button btu-button-fill-none btu-button-gray btu-button-sm btu-button-container-none before:btu-icon before:btu-icon-file-input;
  }

  &:has(.DashboardWidget-maximize) form button {
    @apply me-3;
  }

  > form {
    @apply contents;
  }

  .icon-action-create {
    @apply before:btu-icon-plus;
  }

  .icon-action-search {
    @apply before:btu-icon-search;
  }
}

.DashboardWidget-filters {
  --Input-focusBackground: var(--color-gray2);

  @apply relative flex w-full items-center gap-2 overflow-auto overscroll-x-contain px-[--margin] py-4 transition-opacity [grid-column:fullbleed-start/fullbleed-end];

  form {
    @apply flex w-full min-w-max items-center justify-end gap-2 transition-opacity;
  }
}

/* Guard against the one-frame flash when Bridge.js renames .widget-filters →
   .DashboardWidget-filters in a requestAnimationFrame callback after AJAX injection. */
@starting-style {
  .DashboardWidget-filters,
  .DashboardWidget-filters form {
    @apply opacity-0;
  }
}

.SemRushDashboardWidget .pagination {
  @apply mb-4 mt-0 [grid-column:inner-buffer/main-end];
}

/* Hide empty filters */
.DashboardWidget-filters:not(:has(* + input)) {
  @apply hidden;

  /* Hidden filters won't include the spacing which separates the Message,
  so we need to add it. */
  ~ .Message {
    @apply mt-4;
  }

  /* Hidden filters cause the Widget title border to stack on the LinkList
  border which visually doubles its height. So, we remove the border-top. */
  + .LinkList-wrapper {
    @apply border-t-0;
  }
}

.DashboardPage-heading {
  @apply absolute [font-size:0];
}

/* Calendar Dashboard Widget styles*/
/** There are three calendar dashboard widgets currently with varying design & underlying DOM structure
  * Scheduled Events widget (legacy)
  * Editorial Calendar widget - old editorial calendar (legacy)
  * Calendar widget - new editorial calendar
**/
/* Filters & pagination styling */
.DashboardWidget.widget-scheduledEvents {
  @apply @container/calendar;

  .scheduledEvents-date {
    @apply col-span-full grid py-4 @calendar-lg/calendar:grid-flow-col @calendar-lg/calendar:py-2;
  }

  .scheduledEvents-dateRange {
    @apply btu-heading-5 text-black;
  }

  .DashboardWidget-filters {
    @apply col-span-full row-start-2 ms-0 flex-col items-start justify-end px-[--margin] pb-0 pt-2 @calendar-sm/calendar:flex-row @calendar-sm/calendar:items-center @calendar-lg/calendar:col-start-1 @calendar-lg/calendar:col-end-2 @calendar-lg/calendar:row-start-1 @calendar-lg/calendar:mt-0 @calendar-lg/calendar:justify-start @calendar-lg/calendar:pt-0;
  }

  /* Scheduled events widget specific styles */
  .scheduledEvents-date:has(
      .DashboardWidget-filters .scheduledEvents-dateRange
    ) {
    @apply grid-cols-[1fr_auto];

    .DashboardWidget-pagination {
      @apply my-0 me-[--margin] ms-2 self-end;
    }

    .DashboardWidget-filters {
      @apply col-auto row-start-1 pe-0 pt-0;
    }

    .DashboardWidget-filters > .scheduledEvents-dateRange {
      @apply -order-1 grow;
    }
  }

  /* Pagination styles for new and old editorial calendar dashboard widgets */
  .DashboardWidget-pagination.scheduledEvents-datePagination:has(
      li > .scheduledEvents-dateRange,
      li > form
    ) {
    @apply col-span-full my-0 ms-0 flex-wrap items-center justify-start border-none px-[--margin] @calendar-sm/calendar:flex-nowrap @calendar-sm/calendar:justify-end @calendar-lg/calendar:col-start-2 @calendar-lg/calendar:col-end-3 @calendar-lg/calendar:pb-0;

    .ComboInput {
      @apply border-gray-300;
    }

    li:has(.ComboInput) {
      @apply me-2;
    }

    li:has(.scheduledEvents-dateRange) {
      @apply -order-1 mb-2 w-full grow border-none p-0 @calendar-sm/calendar:mb-0 @calendar-sm/calendar:w-auto @calendar-lg/calendar:absolute @calendar-lg/calendar:left-1/2 @calendar-lg/calendar:-translate-x-1/2;
    }

    li.previous {
      @apply rounded-s-lg border-y border-gray-300;
    }

    li.currentDate {
      @apply border-y border-gray-300;
    }

    li.next {
      @apply rounded-e-lg border-y border-e border-gray-300;
    }
  }
}

/* Calendar view & events styles for scheduled events & old editorial calendar widgets */
.DashboardWidget.widget-scheduledEvents:not(.Calendar) {
  > .Month {
    @apply mb-6;
  }

  > .Week {
    @apply mb-6 overflow-clip rounded-lg border;
  }

  /* Calendar events styles */
  .LinkTable {
    tr {
      @apply flex flex-wrap items-center p-4 hover:bg-transparent;
    }
    td {
      @apply p-0;
    }

    td:not(.LinkTable-main, .LinkTable-label) {
      @apply text-xs text-gray-500;
    }

    td.LinkTable-main {
      @apply w-full max-w-none gap-2 text-sm font-medium text-gray-700;
    }

    td.LinkTable-main .Label {
      @apply me-1;
    }

    tbody > tr:last-child {
      @apply border-b-0;
    }

    td:not(.LinkTable-main, .LinkTable-label, :last-child) {
      @apply after:btu-icon after:btu-icon-dot;
    }

    .LinkTable-main > a[target='scheduleEventsList'] {
      @apply text-xs font-semibold;
    }

    tr:has(a[target='scheduleEventsList']) {
      @apply border-t border-t-gray-200 py-2;
    }
  }
}

/* New Editorial Calendar Widget specific styles */
.DashboardWidget.Calendar > .Month,
.DashboardWidget.Calendar > .Week {
  @apply col-span-full rounded-none border-none;
}

/*
  Content Reporting Widget specific styles
  TODO: possibly remove these styles when ticket is completed: https://perfectsense.atlassian.net/browse/BSP-17271
*/
.DashboardWidget.Widget-reports {
  > .Message {
    @apply row-[4/4] mb-[--margin] mt-0;
  }

  > .LinkTable {
    @apply row-[4/4] pb-[--margin];
  }
}

/* Report Widget (Values) specific styles */
.DashboardWidget:has(> .NB) {
  @apply @container/NB;
}
.DashboardWidget .NB {
  @apply grid grid-cols-[repeat(auto-fit,minmax(var(--cell-min-w),1fr))] gap-4 overflow-clip [--cell-min-w:120px] @lg:[--cell-min-w:150px] @2xl:[--cell-min-w:180px] @4xl:[--cell-min-w:200px];

  &:last-child {
    @apply pb-[--margin];
  }

  > .NB-item {
    @apply flex max-w-full flex-col gap-1 overflow-clip rounded-lg border border-gray-300 p-3 align-baseline;
  }

  .NB-number {
    @apply btu-heading-3 truncate text-gray-900;
  }

  .NB-label {
    @apply truncate text-xs text-gray-500;
  }
}
.DashboardWidget
  > :where(.DashboardWidget-title, .DashboardWidget-controls)
  + .NB {
  @apply pt-[--margin];
}
