.table-wrapper {
  .table {
    margin-bottom: 0;
  }
  @include touch {
    overflow-x: auto;
  }
}

.b-table {
  transition: opacity $speed $easing;

  .table-mobile-sort {
    @include tablet {
      display: none;
    }
  }

  .icon {
    transition: transform $speed-slow $easing, opacity $speed $easing;

    &.is-expanded {
      transform: rotate(90deg);
    }
  }

  .table {
    th {
      .th-wrap {
        display: flex;
        align-items: center;
        .icon {
          margin-left: 0.5rem;
          margin-right: 0;
          width: 0;
          height: 0;
          border-style: solid;
          content: '';
          border-width: 0 3px 4px 3px;
          border-color: transparent transparent $color-gray-chateau transparent;
          display: inline-block;
          &.is-desc {
            border-width: 4px 3px 0 3px;
            border-color: $color-gray-chateau transparent transparent
              transparent;
          }
        }
        &.is-numeric {
          flex-direction: row-reverse;
          text-align: right;
          .icon {
            margin-left: 0;
            margin-right: 0.5rem;
          }
        }
        &.is-centered {
          justify-content: center;
          text-align: center;
        }
      }
      &.is-current-sort {
        border-color: $grey;
        font-weight: $weight-bold;
      }
      &.is-sortable:hover {
        border-color: $grey;
      }
      &.is-sortable,
      &.is-sortable .th-wrap {
        cursor: pointer;
      }
    }
    tr {
      &.is-empty:hover {
        background-color: transparent;
      }
    }
    td {
      &.has-text-right {
        text-align: right;
      }
    }
    .chevron-cell {
      vertical-align: middle;
    }
    .checkbox-cell {
      width: 20px;
      .checkbox {
        vertical-align: middle;

        .check {
          transition: none;
        }
      }
      .b-checkbox.checkbox input[type='checkbox'] + .check {
        margin-right: 0;
      }
    }
    tr.detail {
      box-shadow: inset 0 1px 3px $grey-lighter;
      background: $white-bis;
      .detail-container {
        padding: 1rem;
      }
    }
    &:focus {
      border-color: $link;
      box-shadow: 0 0 0 0.125em rgba($link, 0.25);
    }

    // Modifiers
    &.is-bordered {
      th.is-current-sort,
      th.is-sortable:hover {
        border-color: $grey-lighter;
        background: $background;
      }
    }
    &.has-mobile-cards {
      @include mobile {
        thead {
          display: none;
        }
        tfoot {
          th {
            border: 0; // Disable is-bordered
            display: inherit;
          }
        }
        tr {
          // Card style — Cannot extend inside media query
          box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1);
          max-width: 100%;
          position: relative;
          display: block;
          td {
            border: 0; // Disable is-bordered
            display: inherit;
            &:last-child {
              border-bottom: 0;
            }
          }
          &:not(:last-child) {
            margin-bottom: 1rem;
          }
          // Disables is-*
          &:not([class*='is-']) {
            background: inherit;
            &:hover {
              background-color: inherit;
            }
          }
          &.detail {
            margin-top: -1rem;
          }
        }
        tr:not(.detail):not(.is-empty):not(.table-footer) {
          td {
            display: flex;
            width: auto;
            justify-content: space-between;
            text-align: right;
            border-bottom: 1px solid $background;
            &:before {
              content: attr(data-label);
              font-weight: $weight-semibold;
              padding-right: 0.5em;
              text-align: left;
            }
          }
        }
      }
    }
  }

  .level {
    display: none;
  }

  &.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.5;
    &:after {
      @include loader;
      position: absolute;
      top: 4em;
      left: calc(50% - 2.5em);
      width: 5em;
      height: 5em;
      border-width: 0.25em;
    }
  }
}