@import "../common/PredefinedMixins.scss";
@import "./partial.scss";
@import "./Variables.scss";

.dashboard {
  position: absolute;
  overflow: hidden;
  background-color: $dashboard_bg;

  &:focus-visible {
    @include focus();
  }

  .content-grid {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;

    .dashboard-cell {
      @include partial-row-center-start;
      flex-wrap: wrap;
      font-size: 9pt;
      padding: 5px 10px;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: $dashboard_cell_grid_padding;
        bottom: $dashboard_cell_grid_padding;
        background-color: $dashboard_cell_grid_bg;
        z-index: -10;
        border-radius: 4px;
      }
    }
  }

  .dashboard-content {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: 0 20px 20px 0;
    z-index: 1;
  }
}