@use "@carbon/grid" as cg;
@import "../../../styles/variables";
@import "@carbon/layout";

@include cg.flex-grid();

:host {
  display: block;
  height: 100%;
}

h1 {
  display: flex;
  margin: $spacing-09 0 0 0;
  align-items: center;
  font-size: 18px;

  chef-icon {
    margin-right: $spacing-03;
  }
}

.dashboard-grid {
  @extend .cds--grid;
  height: 100%;
}

.dashboard-grid-row {
  @extend .cds--row;
  height: 100%;
}

.dashboard-overview-column {
  @extend .cds--col-lg-16;
}

.desktop-list-visible .dashboard-overview-column {
  @extend .cds--col-lg-8;
  height: 100%;
  overflow: auto;

  @include cg.breakpoint-down(lg) {
    height: auto;
  }
}

.dashboard-overview-grid {
  @extend .cds--grid;
  @extend .cds--no-gutter;
}

.dashboard-overview-row {
  @extend .cds--row;
}

.dashboard-overview-col {
  @extend .cds--col-lg-8;
}

.desktop-list-visible .dashboard-overview-col {
  @extend .cds--col-lg-16;
}

.dashboard-overview-header {
  @extend .cds--col-lg-16;
}

.dashboard-list-column {
  @extend .cds--col-lg-8;
  height: 100%;
  overflow: auto;

  @include cg.breakpoint-down(lg) {
    height: auto;
  }
}

.desktop-list-fullscreened .dashboard-list-column {
  @extend .cds--col-lg-16;
}

.dashboard-detail-column {
  @extend .cds--col-lg-8;
  height: 100%;
  overflow: auto;

  @include cg.breakpoint-down(lg) {
    height: auto;
  }
}

.desktop-detail-fullscreened .dashboard-detail-column {
  @extend .cds--col-lg-16;
}

app-top-errors,
app-daily-check-in,
app-check-in-time-series,
app-unknown-desktop-duration-counts,
app-insight,
app-desktop-detail {
  display: block;
  margin: $spacing-05 0;
  padding: $spacing-05;
  background: $chef-white;
  border: 1px solid $chef-grey;
  border-radius: $global-radius;

  @include cg.breakpoint-up(lg) {
    height: calc(100% - #{$spacing-07});
  }
}

app-top-errors,
app-unknown-desktop-duration-counts {
  margin-bottom: $spacing-07;

  @include cg.breakpoint-up(lg) {
    height: calc(100% - #{$spacing-09});
  }
}

app-unknown-desktop-duration-counts {
  @include cg.breakpoint-down(lg) {
    margin-bottom: $spacing-05;
  }
}

.desktop-list-visible,
.desktop-detail-visible {
  app-top-errors,
  app-daily-check-in,
  app-check-in-time-series,
  app-unknown-desktop-duration-counts,
  app-insight,
  app-desktop-detail {
    height: auto;
  }

  app-insight,
  app-desktop-detail {
    margin: $spacing-07 0;
  }

  app-top-errors,
  app-unknown-desktop-duration-counts {
    height: auto;
    margin-bottom: $spacing-05;
  }

  app-top-errors {
    margin-bottom: $spacing-07;

    @include cg.breakpoint-down(lg) {
      margin-bottom: 0;
    }
  }

  app-desktop-detail {
    @include cg.breakpoint-down(lg) {
      margin-top: 0;
    }
  }
}

.desktop-detail-fullscreened {
  app-desktop-detail {
    margin-top: $spacing-07;
  }
}
