.table-ui {
  text-align: left;

  /* #Wrapper */
  @include m(wrapper) {
    position: relative;
    box-shadow: $box-shadow-default;
    border-radius: $border-radius-base * 2;
    width: 100%;
    padding: calc-rem(24);
    background-color: var(--color-white);

    &.loading:after {
      @extend %pseudos;

      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      background-color: var(--color-gray-50);
      opacity: 0.5;
      z-index: 999;
    }

    &.table-ui .table-ui__nested {
      &, th, td {
        color: var(--color-gray-400);
        border-bottom: 0;
        padding-top: .36rem;
        padding-bottom: .36rem;
      }

      th {
        padding-left: 1.8rem;
      }
    }
  }

  /* #Nested */
  @include e(nested) {
    @include m(header) {
      tr {
        th, td {
          border-bottom: 0;
          padding-bottom: .36rem;
        }
      }
    }
  }

  table {
    width: 100%;
  }

  thead {
    @include fontSize($font-size-xs);

    color: var(--color-gray-500);
  }

  thead th,
  th {
    border-bottom: 1px solid var(--color-gray-400);
    color: var(--color-gray-500);
    padding: calc-rem(14) calc-rem(14) calc-rem(14) 0;
    font-weight: $font-weight-regular;

    &:first-of-type {
      padding-left: calc-rem(14);
    }

    &:last-of-type {
      padding-right: calc-rem(14);
    }
  }

  td {
    padding: calc-rem(14);
  }

  a {
    color: var(--color-brand-light);
    line-height: 1;

    &:hover {
      color: var(--color-brand-dark);
    }
  }

  /* #Bordered */
  @include e(bordered) {
    td,
    th {
      border-bottom: 1px solid var(--color-gray-200);
    }
  }

  /* #Paginator */
  @include e(paginator) {
    margin-top: 1.2rem;

    @include m(wrapper) {
      .table-ui__bordered & {
        border-bottom: 0;
        padding-bottom: 0;
      }

      > * {
        display: inline-block;
      }
    }

    @include m(sizer) {
      float: right;
    }
  }

  /* #Header */
  @include e(header) {
    margin-bottom: 1.2rem;
  }

  /* #Progress */
  @include e(progress) {
    border-radius: $border-radius-base;
    position: absolute;
    top: 0;
    left: 0.12rem;
    right: 0.12rem;
  }
}