open-learning-exchange/planet

@import '../variables';

$toolbar-height: 25vh;
$label-height: 1rem;

.resources-list {
  /* Column Widths */
  .mat-column-select {
    max-width: 44px;
  }
  .mat-column-tags {
    max-width: 125px;
  }
  .mat-column-rating {
    max-width: 115px;
  }
  .mat-column-createdDate {
    max-width: 125px;
    align-self: start;
  }
  .mat-progress-bar {
    height: 10px;
    width: 120px;
  }

  .search-bar {
    height: $toolbar-height;
  }

  .view-full-height.view-with-search {
    height: calc(#{$view-container-height} - #{$toolbar-height});
  }

  .mat-button, .mat-stroked-button {
    min-width: auto;
  }

  .column {
    display: flex;
    flex-direction: column;
    > * {
      line-height: normal;
    }
  }
}

.ellipsis-menu {
  text-align: center;
}

.created-label {
  display: none;
}

.rating-header {
  justify-content: center;
}

@media(max-width: $screen-md) {
  .resources-list {
    .mat-column-createdDate {
      max-width: 100px;
    }
  }
}

@media(max-width: $screen-sm) {
  .resources-list {
    .mat-column-createdDate {
      max-width: fit-content;
    }

    .created-label {
      display: inline-block;
    }

    .table-selection-top {
      display: none;
    }
  }

  .mat-header-row {
    display: none;
  }

  .mat-row {
    flex-direction: column;
    align-items: start;
    padding: 8px 24px;
  }

  .rating-cell {
    align-self: flex-end;
  }
}