.mds-c-data-table {
  border: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;

  &__resizer {
    display: inline-block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    touch-action: none;
    transform: translateX(50%);
    width: 10px;
    z-index: 1;
  }
}

.mds-c-data-table__header {
  border-bottom: 1px solid #dbe1e5;
  border-left: 1px solid var(--mds-d-background-color--primary);
  box-shadow: none !important;
}

.mds-c-data-table__header-cell {
  display: flex;
  font-size: 0.675rem;
  padding: 0.3125rem;
  text-align: left;
  text-transform: uppercase;

  &:last-child {
    border-right: 0;
  }

  &--resizable {
    border-right: 1px solid var(--mds-d-color-ui--2);
  }
}

.mds-c-data-table .mds-c-data-table__body .mds-c-data-table__cell {
  align-items: center;
  border-right: none;
  display: flex;
  justify-content: flex-start;
  padding: 1rem 0.375rem;
}

.mds-c-data-table__header-content {
  display: flex;
  font-size: 0.675rem;
}

.mds-c-data-table__header-content .mds-c-data-table__header-icon {
  flex-grow: 0;
}

.mds-c-data-table__header-content .mds-c-data-table__header-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mds-c-data-table__header-dropzone {
  bottom: 0;
  display: inline-block;
  position: absolute;
  right: -36px;
  top: 0;
  width: 72px;
  z-index: 11;
}

.mds-c-data-table__header-droparrow {
  border-bottom: 8px solid #000;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  bottom: -8px;
  height: 0;
  position: absolute;
  right: -8px;
  width: 0;
  z-index: 11;
}

.mds-c-data-table__row {
  border-bottom: 1px solid var(--mds-d-color-ui--2);
  overflow: hidden;

  &:last-child {
    border-bottom: 0;
  }
}

.mds-c-data-table__row--selected {
  border: 1px solid var(--mds-d-color-green--500);
}

.-sort-asc,
.-sort-desc {
  box-shadow: none !important;
}

.mds-c-data-table-content {
  display: flex;
  flex-grow: 1;

  @each $spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-$(spacing) {
      padding: var(--mds-d-spacing--$(spacing));
    }
  }

  @each $x-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-vertical-$(x-spacing) {
      padding-bottom: var(--mds-d-spacing--$(x-spacing));
      padding-top: var(--mds-d-spacing--$(x-spacing));
    }
  }

  @each $y-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-horizontal-$(y-spacing) {
      padding-left: var(--mds-d-spacing--$(y-spacing));
      padding-right: var(--mds-d-spacing--$(y-spacing));
    }
  }

  @each $b-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-bottom-$(b-spacing) {
      padding-bottom: var(--mds-d-spacing--$(b-spacing));
    }
  }

  @each $l-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-left-$(l-spacing) {
      padding-left: var(--mds-d-spacing--$(l-spacing));
    }
  }

  @each $t-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-top-$(t-spacing) {
      padding-top: var(--mds-d-spacing--$(t-spacing));
    }
  }

  @each $r-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--padding-right-$(r-spacing) {
      padding-right: var(--mds-d-spacing--$(r-spacing));
    }
  }

  &--align-left {
    justify-content: flex-start;
  }

  &--align-center {
    justify-content: center;
  }

  &--align-right {
    justify-content: flex-end;
  }
}