// INFO TABLE END
// GENERAL TABLE START

.table-container {
  &.ac-table-container {
    margin-bottom: 8px;

    &::-webkit-scrollbar {
      height: 7px;
    }

    /* Track */
    &::-webkit-scrollbar-track {
      background-color: #d1d4de;
      border-radius: 10px;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
      background-color: $gray-70;
      border-radius: 10px;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
      background-color: $gray-60;
    }
  }
}

.table.ac-table {
  background-color: transparent;
  margin-bottom: 0;

  thead {
    // background-color: $primary-95;
    font-size: 1rem;
    line-height: initial;

    tr {
      border-bottom: 1px solid $color-border-light;

      th {
        padding: 10px 20px;
        color: $color-heading;
        border: none;
        font-weight: 500;
        background-color: $secondary-light-gray;
        // background-color: $primary-97;
        // text-transform: uppercase;
        font-weight: 500;

        &.sorting {
          cursor: pointer;
          position: relative;

          &.sorting-asc {
            &::before {
              color: $color-heading;
            }
          }

          &.sorting-desc {
            &::after {
              color: $color-heading;
            }
          }

          &:after,
          &::before {
            position: absolute;
            color: #808998;
            top: 10px;
            font-size: 1rem;
            font-weight: 1000;
            display: block;
          }

          &:before {
            right: 1em;
            content: "\2191";
          }

          &:after {
            right: 0.5em;
            content: "\2193";
          }
        }
      }
    }
  }

  tbody {
    &.is-selected {
      transform: matrix(1, 0, 0, 1, 0, 0) !important;
      box-shadow: inset 0 0 0 1px $ac-primary;
      border-radius: 4px;
      border-bottom: none;
      color: $gray-5;
    }

    tr {
      border-bottom: 1px solid $color-border;
      &.is-link {
        cursor: pointer;
      }
      &.is-selected {
        background-color: $primary-97 !important;
        transform: matrix(1, 0, 0, 1, 0, 0) !important;
        box-shadow: inset 0 0 0 1.2px $ac-primary;
        border-radius: 4px;
        border-bottom: none;
        color: $gray-5;
        transition: 0.3s ease-in-out;
        .tag {
          background-color: $primary-80;
        }
        &:hover {
          background-color: $primary-95 !important;
          transform: matrix(1, 0, 0, 1, 0, 0) !important;
          box-shadow: inset 0 0 0 1.2px $ac-primary !important;
        }
      }

      &.is-hoverless {
        box-shadow: none !important;
        transform: none !important;
        background-color: $white-100 !important;
      }
      td {
        font-size: 1rem;
        padding: 5px 20px;
        color: $color-heading;
        border: none;

        a:not(.tag a) {
          color: $ac-primary;
          font-weight: 500 !important;
          transition: 0.3s ease-in-out;
          font-weight: 400;
        }

        .tags {
          .tag {
            a {
              color: inherit;
              transition: 0.3s ease-in-out;
              font-weight: 500;

              &:hover {
                color: $color-heading;
              }
            }
          }
        }

        &.is-danger {
          color: $danger;
        }

        .image-with-status {
          margin-right: 20px;
          position: relative;
          z-index: 1;
          display: inline-flex;

          &.is-danger {
            background-color: $danger;
          }

          i.fa {
            position: absolute;
            background-color: $ac-primary;
            color: $white-100;
            font-size: 11px;
            width: 15px;
            height: 15px;
            text-align: center;
            line-height: 15px;
            border-radius: 50%;
            right: -5px;
            top: 5px;

            &.fa-close {
              background-color: $danger;
            }
          }

          img {
            width: 20px;
            height: 20px;
            object-fit: cover;
            border-radius: 50%;
          }
        }

        .collapsible-row {
          max-height: 0;
          overflow-y: hidden;

          &.is-active {
            max-height: 60vh;
            overflow-y: overlay;
            animation: expand 0.5s ease-in-out;
          }

          &.is-closed {
            max-height: 0;
            overflow-y: hidden;
            animation: collapse 0.5s ease-in-out;
          }
        }

        white-space: nowrap;
      }

      .options-items {
        a:hover {
          color: $white-100;
          text-decoration: none;
        }
      }

      transition: 0.3s ease-in-out;
    }
  }

  .increase-width {
    position: relative;
    visibility: hidden;
    width: 36px;

    .increase-innner {
      border-bottom: 1px solid $color-border;
      border-top: 1px solid $color-border;
      bottom: -1px;
      left: 0;
      position: absolute;
      right: -451px;
      top: -1px;
      visibility: visible;
      background-color: $color-border;
    }
  }

  td {
    &.increase-width {
      .increase-innner {
        background-color: transparent;
      }
    }
  }

  &.is-bordered {
    thead {
      tr {
        th {
          background-color: $secondary-light-gray;
          border-top: 1px solid $color-border-light;
          border-bottom: 1px solid $color-border-light;
          border-right: 1px solid $color-border-light;

          &:first-child {
            border-left: 1px solid transparent;
          }
          &:last-child {
            border-right: 1px solid transparent;
          }
        }
      }
    }

    tbody {
      tr {
        &:hover {
          box-shadow: none;
        }

        td {
          font-size: 1rem;
          color: $color-text;
          background-color: transparent;
          border-bottom: 1px solid $color-border-light;
          border-right: 1px solid $color-border-light;
          &:last-child {
            border-right: 1px solid transparent;
          }
          &:first-child {
            border-left: 1px solid transparent;
          }

          &:first-child {
            color: $color-heading;
            border-radius: 0;
          }

          &:last-child {
            border-radius: 0;
          }

          .ac-single-checkbox {
            .is-checkradio[type="checkbox"] {
              &.ac-checkbox + label {
                color: $color-text;

                &::before {
                  height: 16px;
                  width: 16px;
                  background-color: $primary-95;
                }

                &::after {
                  top: 6px;
                  left: 6px;
                  border-color: $gray-80;
                  width: 0.3rem;
                  height: 0.5rem;
                }
              }

              &:checked + label::before {
                background-color: $ac-primary;
                border-color: $ac-primary;
              }

              &:checked + label::after {
                border-color: $color-border;
              }
            }
          }

          .is-checkradio[type="checkbox"].ac-checkbox:checked + label::before {
            background-color: $ac-primary;
            border-color: $ac-primary;
          }

          .is-checkradio[type="checkbox"] + label::before,
          .is-checkradio[type="checkbox"] + label:before {
            top: 3px;
          }
        }
      }
    }
  }

  &.ac-separate-tr {
    border-collapse: separate;
    border-spacing: 0px 5px;

    tbody {
      tr {
        background-color: transparent;
      }
    }
  }

  &.is-middle {
    tbody {
      tr {
        td {
          vertical-align: middle;
        }
      }
    }
  }
  &.is-baseline {
    tbody {
      tr {
        td {
          vertical-align: baseline;
        }
      }
    }
  }
  &.is-bottom {
    tbody {
      tr {
        td {
          vertical-align: bottom;
        }
      }
    }
  }

  &.is-dark {
    thead {
      background-color: $primary-5;

      tr {
        th {
          color: $white-100;
        }
      }
    }

    tbody {
      tr {
        td {
          color: $white-100;
        }

        &:nth-child(odd) {
          background-color: $primary-20;
        }

        &:nth-child(even) {
          background-color: $primary-5;
        }

        &:hover {
          background-color: $ac-primary;

          td {
            color: $white-100;
          }
        }
      }
    }
  }
}

.table.ac-table tbody tr:hover td a:not(.tag a) {
  text-decoration: underline;
  color: $ac-primary;
}

// table inner shadow
.table-inner-shadow {
  border-radius: 0px;
  background: $color-border;
  box-shadow:
    inset 5px 5px 10px #e3e6e9,
    inset -5px -5px 10px $white-100;
}

@keyframes expand {
  from {
    max-height: 0;
    overflow-y: hidden;
  }
  1% {
    overflow-y: hidden;
  }
  99% {
    overflow-y: hidden;
  }
  to {
    max-height: 60vh;
    overflow-y: overlay;
  }
}

@keyframes collapse {
  from {
    max-height: 60vh;
    overflow-y: overlay;
  }
  1% {
    overflow-y: hidden;
  }
  99% {
    overflow-y: hidden;
  }
  to {
    max-height: 0;
    overflow-y: hidden;
  }
}

// GENERAL TABLE END