@use '@material/data-table/variables' as data-table-variables;
@use '@material/top-app-bar/variables' as top-app-bar-variables;
@use './theme' as ui-theme;

.mdc-data-table--fullwidth {
  display: flex;
  width: 100%;
}

.mdc-data-table__cell {
  &--left {
    text-align: left;
  }

  &--center {
    text-align: center;
  }

  &--right {
    text-align: right;
  }
}

.mdc-data-table__footer-row {
  height: data-table-variables.$row-height;
  border-top: data-table-variables.$stroke-size solid
    data-table-variables.$stroke-color;

  .mdc-data-table__cell {
    font-weight: bold;
  }
}

// For slot
.mdc-data-table__header-cell-label {
  align-items: center;
  display: inline-flex;
  vertical-align: middle;
}

@media (max-width: top-app-bar-variables.$mobile-breakpoint) {
  .mdc-data-table {
    width: 100%;
  }
}

.mdc-data-table__header-cell--scrollbar {
  position: sticky;
  right: 0px;
  width: 0px;
  border-right-color: transparent;
}

.mdc-data-table--fixed {
  width: 100%;

  .mdc-data-table__cell {
    background-color: white;
    z-index: 1; // FIX: for data input components
  }
}

.mdc-data-table__fixed-header,
.mdc-data-table__fixed-footer {
  overflow: hidden;

  table {
    position: relative;
    width: 100%;
  }
}

.mdc-data-table__fixed-body {
  overflow: auto;

  table {
    min-width: 100%;
  }
}