.table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;

    thead {
      text-align: left;
      //background-color: $color-catskill-white;

      tr {
        height: rem-calc(40);
        border-bottom: 1px solid $color-athens-gray;

        th {
          text-transform: uppercase;
          color: $color-pale-sky;
          font-weight: 600;
          font-size: $font-size-xxxx-small;
          letter-spacing: 0.18px;
          white-space: nowrap;

          a {
            position: relative;
            font-size: $font-size-xxx-small;
            &:after {
              display: none;
              width: 0;
              height: 0;
              border-style: solid;
              content: '';
              position: absolute;
              top: 4px;
              right: -10px;
            }

            &.asc {
              &:after {
                border-width: 0 3px 4px 3px;
                border-color: transparent transparent $color-gray-chateau
                  transparent;
                display: inline-block;
              }
            }

            &.desc {
              &:after {
                border-width: 4px 3px 0 3px;
                border-color: $color-gray-chateau transparent transparent
                  transparent;
                display: inline-block;
              }
            }

            &.product {
              padding-left: rem-calc(8);
            }
          }
        }
      }
    }

    tbody {
      background-color: #fff;

      tr {
        transition: background-color 0.2s;
        &:hover {
          background-color: $color-catskill-white;
        }
        // border-bottom: 0;
        td {
          position: relative;

          &:after {
            content: '';
            width: 100%;
            height: 1px;
            background: $color-athens-gray;
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
          }
          &:first-child {
            &:after {
              left: 20px;
            }
          }

          &:last-child {
            &:after {
              right: 20px;
              left: auto;
            }
          }
        }
      }
    }

    tr {
      display: table-row;
      height: rem-calc(90);
      font-size: rem-calc(14);
      font-weight: 400;
      position: relative;

      .with-thumb {
        &-50 {
          width: rem-calc(50);
          padding: 0;
        }
      }

      .avatar {
        position: relative;

        .blocked-client {
          width: rem-calc(18);
          height: rem-calc(18);
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          border-radius: 50%;
          background-color: $color-mandy;
          border: 2px solid $color-white;
          top: -3px;
          right: -3px;

          &:after {
            content: '';
            width: rem-calc(8);
            height: rem-calc(2);
            background-color: $color-white;
          }
        }
      }

      .product {
        padding-left: rem-calc(8);

        .name,
        .text {
          a,
          span {
            display: flex;
            align-items: center;
            text-decoration: none;

            .icon {
              margin-left: rem-calc(5);
            }
          }
        }

        .icon-promo {
          font-size: rem-calc(18);
        }
      }

      .sku {
        //@extend .ts-table-headers;

        color: $color-gray-chateau;
        font-size: $font-size-xxx-small;

        span {
          display: block;
        }
      }

      .times {
        padding: 0 rem-calc(35);
      }

      .url {
        i {
          color: $color-golden-grass;
          padding-left: rem-calc(10);
        }
      }

      &.children {
        //background: $color-blue-white;
        .btn-stock {
          //background: $color-catskill-white;
        }
        .property {
          //@extend .ts-table-headers;

          color: $color-gray-chateau;
          font-size: $font-size-xxx-small;

          span {
            //margin-right: 10px;
            display: block;
          }
        }
        .product {
          padding-left: rem-calc(10);
        }
      }

      &:hover {
        td {
          &.actions-group > a {
            opacity: 1;
          }
        }
      }

      &.narrow {
        height: rem-calc(50);
      }

      ul {
        @extend .clear-list;
      }
      ul.table-columns {
        display: flex;
        align-items: center;
      }

      td:first-child,
      th:first-child {
        padding-left: rem-calc(20);
        &.checkbox {
          padding-right: 10px;
          max-width: rem-calc(46);
        }
      }

      td:last-child,
      th:last-child {
        padding-right: rem-calc(20);
      }

      &.canceled-order {
        td,
        td a,
        td i {
          color: $color-gray-chateau;
        }

        td.price {
          text-decoration: line-through;
          color: $color-mandy;
        }
      }

      &.deleting {
        background-color: $color-catskill-white;

        td,
        td a,
        td span.text-status,
        td i {
          color: $color-gray-chateau;
        }

        td span.text-status i {
          background-color: $color-gray-chateau;
        }

        td span.stock-quantity {
          background-color: rgba($color-gray-chateau, 0.2);
          color: $color-gray-chateau;
        }

        img {
          filter: grayscale(100%);
        }

        td.actions a {
          display: none;
        }
      }
    }

    td,
    th {
      padding: 0 1.25rem;
    }

    td {
      display: table-cell;

      &.with-handle {
        &.handle {
          display: block;
        }
      }

      &.actions-group {
        a {
          color: $color-pale-sky;
          transition: opacity 0.2s linear;
          font-size: rem-calc(22);
          @include breakpoint(lg) {
            opacity: 0;
          }
        }
        span {
          cursor: pointer;
        }
        .move-back {
          &:before {
            transform: scaleY(-1);
            display: inline-block;
          }
        }
        .move-back,
        .move-forward {
          color: $color-gray-chateau;
          margin-left: rem-calc(10);
        }
      }

      &.list-channels {
        padding-right: 0;
        padding-left: 0;
        font-size: 0;
        white-space: nowrap;
        width: 0.1%;
      }

      &.amount {
        span {
          white-space: nowrap;
        }

        .qty {
          white-space: nowrap;
          font-weight: 600;
        }
      }

      &.price {
        white-space: nowrap;
        font-weight: 600;
      }

      &.language {
        span + .tag {
          margin-left: rem-calc(5);
        }
      }

      a {
        color: $color-lochmara;
      }

      span.client-email {
        display: block;
        color: $color-pale-sky;
        line-height: rem-calc(19);
      }

      &.products {
        min-width: rem-calc(340);
      }
    }
  }
}