index.scss

:root {
  --pgn-elevation-data-table-box-shadow:
    var(--pgn-elevation-data-table-box-shadow-offset-x)
    var(--pgn-elevation-data-table-box-shadow-offset-y)
    var(--pgn-elevation-data-table-box-shadow-blur)
    var(--pgn-elevation-data-table-box-shadow-color);

  --pgn-spacing-data-table-padding-cell:
    var(--pgn-spacing-data-table-padding-cell-x)
    var(--pgn-spacing-data-table-padding-cell-y);
}

.pgn__data-table-wrapper {
  font-size: var(--pgn-typography-font-size-sm);
  border-radius: var(--pgn-size-border-radius-base);
  background-color: var(--pgn-color-data-table-bg-base);
  box-shadow: var(--pgn-elevation-data-table-box-shadow);

  &.hide-shadow {
    box-shadow: none;
  }

  > :first-child {
    border-top-left-radius: var(--pgn-size-border-radius-base);
    border-top-right-radius: var(--pgn-size-border-radius-base);
  }

  > :last-child {
    border-bottom-left-radius: var(--pgn-size-border-radius-base);
    border-bottom-right-radius: var(--pgn-size-border-radius-base);
  }
}

.pgn__bulk-actions,
.pgn__table-actions {
  display: flex;

  .pgn__data-table__visible-actions {
    margin-inline-start: var(--pgn-spacing-spacer-2);

    .btn {
      margin-inline-start: var(--pgn-spacing-spacer-2);

      &:first-child {
        margin-inline-start: 0;
      }
    }
  }
}

.pgn__data-table-dataview-toggle {
  flex: auto;
}

.pgn__data-table-actions-right {
  display: flex;
  align-items: center;
}

.pgn__data-table-actions-right-toggle-bottom {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  width: 100%;

  .pgn__data-table-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: var(--pgn-spacing-spacer-4);
  }

  .pgn__icon-button-toggle__container {
    justify-content: flex-end;
  }
}

.pgn__data-table-container {
  width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;

  &.is-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--pgn-color-data-table-bg-is-loading);
    z-index: 1;
  }
}

.pgn__data-table-layout-wrapper {
  display: flex;
  align-items: flex-start;

  @media (--pgn-size-breakpoint-max-width-xl) {
    overflow-x: scroll;
  }

  .pgn__data-table-layout-sidebar {
    background-color: var(--pgn-color-data-table-bg-base);
    border-radius: var(--pgn-size-border-radius-base);
    box-shadow: var(--pgn-elevation-data-table-box-shadow);
    padding: var(--pgn-spacing-data-table-padding-small);
    margin-right: var(--pgn-spacing-spacer-4);
    flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width);
  }

  .pgn__data-table-side-filters {
    .pgn__data-table-side-filters-title {
      margin-bottom: var(--pgn-spacing-spacer-3);
      text-align: start;
    }

    .pgn__data-table-side-filters-status {
      margin-bottom: var(--pgn-spacing-spacer-2);
      display: flex;
      justify-content: flex-end;
    }

    .pgn__data-table-side-filters-item {
      .pgn__form-checkbox {
        align-items: center;
      }
    }
  }

  .pgn__data-table-layout-main {
    flex-grow: 1;
  }
}

.pgn__data-table {
  width: 100%;

  &.is-striped tr:nth-child(even) {
    background-color: var(--pgn-color-data-table-bg-striped);
  }

  th {
    background-color: var(--pgn-color-data-table-bg-header);
    padding: var(--pgn-spacing-data-table-padding-cell);
    text-align: start;
  }

  td {
    padding: var(--pgn-spacing-data-table-padding-cell);
    line-height: 24px;
    text-align: start;
  }

  & tr.is-selected {
    background-color: var(--pgn-color-info-100) !important;
  }
}

.pgn__data-table-cell-wrap {
  max-width: 20vw;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pgn__data-table-empty {
  padding: var(--pgn-spacing-data-table-padding-x) var(--pgn-spacing-data-table-padding-y);
}

.pgn__data-table-actions {
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--pgn-spacing-data-table-padding-small);
}

.pgn__data-table-status-bar {
  padding: var(--pgn-spacing-data-table-padding-y) var(--pgn-spacing-data-table-padding-x);
}

.pgn__data-table-filters {
  display: flex;
}

.pgn__data-table-filters-breakout-filter {
  margin-inline-end: var(--pgn-spacing-spacer-2);
}

.pgn__data-table-filters-dropdown-item {
  padding: var(--pgn-spacing-data-table-padding-small) 14px;
  min-width: 15em;

  .pgn__form-checkbox {
    align-items: center;
  }
}

.pgn__data-table-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pgn__data-table-footer {
  display: flex;
  justify-content: space-between;
  padding: var(--pgn-spacing-data-table-padding-x) var(--pgn-spacing-data-table-padding-y);
  align-items: center;
  border-top: var(--pgn-size-data-table-border) solid var(--pgn-color-data-table-border);

  .btn-icon .pgn__icon {
    [dir="rtl"] & {
      transform: scale(-1);
    }
  }
}

.pgn__data-table-pagination {
  display: flex;

  .pgn__page-count {
    align-self: var(--pgn-spacing-data-table-footer-position);
  }
}

.pgn__data-table-pagination-dropdown {
  overflow-y: auto;
  max-height: var(--pgn-size-data-table-dropdown-pagination-max-height);
  min-width: var(--pgn-size-data-table-dropdown-pagination-min-width);

  a {
    text-align: center;
  }
}

.pgn__checkbox-filter-label {
  font-weight: var(--pgn-typography-font-weight-bold);
}

.pgn__checkbox-filter {
  display: flex;

  input .form-check-input {
    margin-top: .36rem;
  }

  .form-check {
    [dir="rtl"] & {
      padding-left: 0;
      padding-right: 1.25rem;
    }

    .form-check-input {
      [dir="rtl"] & {
        margin-left: 0;
        margin-right: -1.25rem;
      }
    }
  }
}

.pgn__dropdown-filter-checkbox-group {
  margin-left: .75rem;
  margin-right: .75rem;

  input .form-check-input {
    margin-top: .36rem;
  }
}

.pgn__data-table-card-view {
  padding: 0 var(--pgn-spacing-data-table-padding-x);

  .pgn__data-table-card-view-default-skeleton-card-section {
    margin-top: var(--pgn-spacing-spacer-2);
  }
}

.pgn__data-table__action-btn {
  margin-left: var(--pgn-spacing-spacer-2);

  &:first-child {
    margin-left: 0;
  }
}

.pgn__data-table-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  overflow: hidden;
}

.pgn__data-table__overflow-actions-menu {
  background: var(--pgn-color-bg-base);
  padding: var(--pgn-spacing-spacer-2);
  box-shadow: var(--pgn-elevation-box-shadow-level-1);
  border-radius: 4px;
}

.pgn__data-table__selectable-card {
  display: flex;
  align-items: flex-start;
  flex-grow: 1;

  > :first-child {
    height: 100%; // ensure Card stretches full height of column
  }

  &.is-selected {
    > :first-child {
      @extend %pgn__card-focused;
    }
  }

  &.selection-right {
    > :first-child {
      margin-right: var(--pgn-spacing-spacer-2);

      [dir="rtl"] & {
        margin-left: var(--pgn-spacing-spacer-2);
        margin-right: 0;
      }
    }
  }

  &.selection-left {
    flex-direction: row-reverse;
  }
}

.pgn__data-table__controlled-select {
  display: flex;
  align-content: center;
  padding: var(--pgn-spacing-spacer-1);
}