/*
  Dashboards Card Grid Styles
  ------------------------------------------------------------------------------
*/

$dashboard-grid-gap: $cf-marg-a;

.dashboards-index__page-contents {
  .cf-dapper-scrollbars--content {
    height: 100% !important;
  }
  .cf-page-contents__fixed {
    height: 100%;
  }
  .cf-resource-list {
    height: 100%;
  }
}

.dashboards-card-grid {
  padding-bottom: $cf-marg-d;
  display: grid;
  grid-template-columns: minmax(100%, 1fr);
  grid-auto-rows: 152px;
  grid-column-gap: $dashboard-grid-gap;
  grid-row-gap: $dashboard-grid-gap;
  height: 100%;

  .cf-resource-card {
    margin-bottom: 0;
  }

  .cf-resource-card--contents {
    position: relative;
  }

  .cf-resource-editable-name {
    position: absolute;
    width: 100%;

    .cf-resource-name--text {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .cf-resource-description {
    flex: 1 0 30px;
    margin-top: 22px;
    overflow: hidden;
  }
}

$dashboard-card-half: calc(50% - #{$dashboard-grid-gap});
$dashboard-card-third: calc(33.3333% - #{$dashboard-grid-gap});
$dashboard-card-quarter: calc(25% - #{$dashboard-grid-gap});

@media screen and (min-width: $cf-grid--breakpoint-sm) {
  .dashboards-card-grid {
    grid-template-columns: minmax($dashboard-card-half, 1fr) minmax($dashboard-card-half, 1fr);
  }
}

@media screen and (min-width: $cf-grid--breakpoint-md) {
  .dashboards-card-grid {
    grid-template-columns: minmax($dashboard-card-third, 1fr) minmax($dashboard-card-third, 1fr) minmax($dashboard-card-third, 1fr);
  }
}

@media screen and (min-width: $cf-grid--breakpoint-lg) {
  .dashboards-card-grid {
    grid-template-columns: minmax($dashboard-card-quarter, 1fr) minmax($dashboard-card-quarter, 1fr) minmax($dashboard-card-quarter, 1fr) minmax($dashboard-card-quarter, 1fr);
  }
}
