.#{$prefix}table {
  margin-bottom: 0;
  border-spacing: 0;
  border-collapse: separate;
  border: 1px solid $smoke;
  @include border-radius(4px);
  td {
    background: $white;
  }
  tr:hover {
    background: $cloud;
    td {
      background: inherit;
    }
  }
  th,
  td {
    padding: 10px 16px;
    border-top: 0;

    .#{$prefix}btn-icon {
      margin-top: -8px;
      margin-bottom: -8px;
    }
  }
  thead {
    th {
      background-color: $light;
      border-bottom: $table-border-width solid $table-border-color;
      &:first-child {
        // stylelint-disable-next-line property-blacklist
        border-top-left-radius: 4px;
      }
      &:last-child {
        // stylelint-disable-next-line property-blacklist
        border-top-right-radius: 4px;
      }
    }
    .sort {
      cursor: pointer;
      span {
        position: relative;
        &::before,
        &::after {
          position: absolute;
          right: -12px;
          width: 0;
          height: 0;
          content: "";
          border-style: solid;
        }
        &::before {
          top: 2px;
          border-color: transparent transparent $slate transparent;
          border-width: 0 4px 4px;
        }
        &::after {
          bottom: 2px;
          border-color: $slate transparent transparent transparent;
          border-width: 4px 4px 0;
        }
      }
      &.sort-up,
      &.sort-down {
        span {
          &::before {
            border-color: transparent transparent $dark transparent;
          }
          &::after {
            border-color: $dark transparent transparent transparent;
          }
        }
      }
    }
  }
  tbody {
    tr:not(:last-child) {
      // stylelint-disable-next-line selector-max-type
      th,
      td {
        border-bottom: 1px solid $table-border-color;
      }
    }
  }

  .#{$prefix}table-action-list {
    position: sticky;
    left: 16px;
  }

  &.#{$prefix}table-bordered {
    tbody {
      th,
      td {
        border-bottom: 0;
      }
    }
    th,
    td {
      border-right: $table-border-width solid $table-border-color;
      border-left: 0;
    }
    thead th:last-child,
    tbody td:last-child {
      border-right: 0;
    }
  }

  .#{$prefix}table {
    &__checkbox {
      width: 32px;
      padding-right: 0;

      .#{$prefix}custom-control {
        padding-left: 16px;
        margin-bottom: 0;

        &-label {
          &::before,
          &::after {
            left: -16px;
          }
        }
      }
    }
  }
}

.#{$prefix}table-layout-auto {
  table-layout: auto !important; // stylelint-disable-line declaration-no-important
}

.#{$prefix}table-sticky {
  thead tr th {
    position: sticky;
    top: 0;
  }
  th:nth-child(1),
  th:last-child {
    z-index: 2;
  }
  &--left {
    td:nth-child(1),
    th:nth-child(1) {
      position: sticky;
      left: 0;
      z-index: 2;
    }
  }
  &--right {
    td:last-child,
    th:last-child {
      position: sticky;
      right: 0;
      z-index: 2;
    }
  }
}