$vl-pad: 1.2rem;
$vl-pad-small: 1rem;
$vl-pad-tiny: 0.3rem;

.vl-data-table {
  width: 100%;
  max-width: 100%;

  caption {
    color: $vl-sub-text-color;
    caption-side: bottom;
    text-align: left;
    margin: 15px 0;
    font-size: $vl-base-font-size;
  }

  thead {
    tr {
      border-bottom: 0.3rem $vl-border-color solid;
    }
  }

  tfoot {
    tr {
      border-top: 0.3rem $vl-border-color solid;
    }

    td {
      font-weight: 500;
      white-space: nowrap;
    }
  }

  tbody {

    tr,
    td {
      &.vl-data-table__element--error {
        background: $vl-error-fg-color;
        border-bottom: 1px solid $vl-error-color;
      }

      &.vl-data-table__element--warning {
        background: $vl-warning-fg-color;
        border-bottom: 1px solid $vl-warning-color;
      }

      &.vl-data-table__element--success {
        background: $vl-success-fg-color;
        border-bottom: 1px solid $vl-success-color;
      }
    }

    tr {
      border-bottom: 0.1rem $vl-border-color solid;

      &[data-vl-table-selectable] {
        cursor: pointer;
        transition: background 0.2s ease-in-out;

        &:hover {
          background: $vl-porcelain;
        }
      }


      &.vl-data-table__grouped-row {
        &:not(.vl-data-table__grouped-row--last) {
          border-bottom: 0;
        }
      }
    }
  }

  td,
  th {
    font-size: 1.6rem;
    line-height: 1.3;
    text-align: left;
    vertical-align: top;
    padding: $vl-pad $vl-pad-small;

    @include respond-to(small) {
      font-size: 1.4rem;
      padding: $vl-pad-small;
    }

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

    &.vl-data-table__icon-container {
      background-color: $vl-porcelain;
      color: $vl-text-color;

      .vl-vi {
        color: $vl-alt-text-color;
        font-size: 3rem;
      }

      .vl-vi & {
        text-align: center;
      }
    }
  }

  th {
    font-weight: 500;
    white-space: nowrap;
  }

  // Data table grouped row
  .vl-data-table__grouped-row {
    td {
      padding: $vl-pad-tiny $vl-pad-small $vl-pad-tiny 0;

      @include respond-to(small) {
        padding: $vl-pad-tiny $vl-pad-small $vl-pad-tiny 0;
      }
    }

    // Data table grouped row first modifier
    &--first {
      td {
        padding-top: $vl-pad;

        @include respond-to(small) {
          padding-top: $vl-pad-small;
        }
      }
    }

    // Data table grouped row last modifier
    &--last {
      td {
        padding-bottom: $vl-pad;

        @include respond-to(small) {
          padding-bottom: $vl-pad-small;
        }
      }
    }
  }

  // Data table header title
  &__header-title {
    // Data table header title sortable modifier
    &--sortable {
      text-decoration: none;

      .vl-data-table__header-title__sort-icon {
        opacity: 0;
      }

      &:hover,
      &:focus {
        text-decoration: underline;

        .vl-data-table__header-title__sort-icon {
          opacity: 0.5;
        }
      }

      // Data table header title sortable modifier active
      &-active {
        .vl-data-table__header-title__sort-icon {
          opacity: 1;
        }
      }
    }
  }

  // Data table body title
  &__body-title {
    max-width: 30rem;
  }

  // Data table alt modifier
  &--alt {
    tr {
      th,
      td {
        &:first-child {
          border-right: 0.1rem $vl-border-color solid;
        }
      }

      th {
        &:not(:first-child) {
          padding: 0 $vl-pad $vl-pad;
        }
      }

      td {
        &:not(:first-child) {
          padding: $vl-pad;
        }
      }
    }
  }

  &--double-spacing {
    tr {
      td,
      th {
        padding: $vl-pad ($vl-pad-small * 3);
      }
    }
  }

  // Data table no header modifier
  &--no-header {
    tbody {
      tr {
        &:first-child {
          border-top: 3px $vl-border-color solid;
        }
      }
    }
  }

  .vl-pill {
    vertical-align: middle;

    @include respond-to(small) {
      font-size: 1.4rem;
      height: 2rem;
      line-height: 2rem;
      padding: 0 0.5rem;
    }
  }
}

.vl-u-table-overflow {
  width: 100%;
  overflow-x: auto;

  .vl-data-table {
    overflow: auto;
  }
}

.no-js [data-vl-table-check-all] + span {
  display: none !important; // sass-lint:disable-line no-important
}

// Imports
@import "hover";
@import "matrix";
@import "lined";
@import "zebra";
@import "actions";
@import "collapsed";