.DashboardRow {
  @apply flex flex-wrap overflow-x-auto bg-gray-25 px-0 xs:p-2 sm:p-3 md:flex-nowrap;

  + .DashboardRow {
    @apply -mt-4 sm:-mt-6;
  }
}

.DashboardRow-column {
  @apply min-w-[375px] grow md:min-w-[calc(theme(screens.xs)_-_theme(padding.8))];
}

.DashboardRow-cell {
  @apply px-0 py-2 xs:p-2 sm:p-3;
}

/* Quick Start widget styles */
.DashboardRow:has(.CreateNewWidget),
.DashboardRow-cell:has(.CreateNewWidget) {
  @apply p-0;
}

.DashboardRow-cell.is-maximized {
  @apply absolute inset-0 z-20; /* z-index needs to be higher than the scroll shadows on widgets. */
}

/* Alerts Widget styles (move to backend eventually) */
.DashboardRow-cell[data-dashboard-widget-url*='AlertsDashboardWidget'] {
  .LinkList tr {
    @apply flex;

    td.LinkList-main {
      @apply flex-[2] flex-col items-start gap-1;
    }

    td.date,
    td.time {
      @apply flex-1;
    }

    td.LinkList-image {
      @apply h-min;
    }

    /* Main text element should sit flush-left with an icon. */
    &:has(.LinkList-image.is-icon) .LinkList-main {
      @apply pl-0;
    }
  }

  .LinkList th {
    @apply w-1/4;
  }
}
