@import '../../assets/styles/variable.scss';

.table-section {
  background: $white;
  border-radius: 10px;
  min-height: 100vh;
  margin-bottom: 20px;
  overflow: hidden;
  min-height: fit-content;
  .table {
    thead {
      tr {
        th {
          background: $black_variation-2;
          font-weight: $font-weight-500;
          font-size: $font-size-12;
          line-height: $line-height-18;
          color: $white;
          padding: 16px;
        }
      }
    }
    tbody {
      tr {
        &.child-row {
          background-color: $grey_variation-2;
          td {
            &:first-child {
              padding-left: 30px;
            }
          }
        }
        &.last-child {
          background-color: $grey_variation-2;
          td {
            &:first-child {
              padding-left: 40px !important;
            }
            &:nth-child(2) {
              padding-left: 30px;
            }
          }
        }
        &:hover {
          background-color: $green_variation-2;
          .edit-information {
            visibility: visible;
          }
          .moreoption {
            display: none;
          }
          .moreoption-active {
            display: block;
          }
        }

        td {
          font-weight: $font-weight-400;
          font-size: $font-size-14;
          line-height: $line-height-20;
          letter-spacing: $letter-spacing;
          text-transform: capitalize;
          color: $black_variation-2;
          height: 56px;
          vertical-align: middle;
          padding: 16px;
          &.name-tooltip {
            max-width: 200px;
            span {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              white-space: initial;
            }
          }
          &.child-rotate {
            img {
              transform: rotate(90deg);
            }
          }
          &.date-column-formated {
            font-weight: $font-weight-400;
          }
        }
        .live-status {
          span {
            color: $green;
          }
        }
        .broken-status {
          span {
            color: $red_variation_1;
          }
        }
        .in-progress-status {
          span {
            color: #ed872d;
          }
        }
        .table-tips {
          display: flex;
          flex-direction: row;
          width: 160px;
          flex-wrap: wrap;
          margin-bottom: -8px;
          &.dashboard-tip {
            li {
              margin-right: 8px;
              margin-bottom: 8px;
              background: none;
              border-radius: 0px;
              display: flex;
              align-items: center;
              label {
                font-weight: $font-weight-normal;
                font-size: $font-size-14;
                line-height: $line-height-20;
                letter-spacing: $letter-spacing;
                text-transform: capitalize;
                color: $black_variation-2;
                &.name-tooltip {
                  max-width: 200px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  white-space: initial;
                }
              }
            }
            .additional-tips-hide {
              display: none;
            }
            .additional-tips {
              background: $white;
              border: 0.7px solid $grey_variation-1;
              border-radius: 4px;
              cursor: pointer;
              label {
                font-weight: $font-weight-500;
                font-size: $font-size-12;
                line-height: $line-height-14;
                padding: 5px 8px;
                font-size: 12px;
                line-height: 14px;
                color: $green;
                display: flex;
                align-items: center;
                cursor: pointer;
                img {
                  margin-left: 4px;
                }
              }
            }
          }
          li {
            height: 24px;
            margin-right: 8px;
            margin-bottom: 8px;
            background: $grey_variation-2;
            border-radius: 4px;
            display: flex;
            align-items: center;
            span {
              font-weight: $font-weight-normal;
              font-size: $font-size-12;
              line-height: $line-height-14;
              color: $black_variation-2;
              padding: 5px 8px;
            }
          }
          .additional-tips-hide {
            display: none;
          }
          .additional-tips {
            background: $white;
            border: 0.7px solid $grey_variation-1;
            border-radius: 4px;
            cursor: pointer;
            label {
              font-weight: $font-weight-500;
              font-size: $font-size-12;
              line-height: $line-height-14;
              padding: 5px 8px;
              font-size: 12px;
              line-height: 14px;
              color: $green;
              display: flex;
              align-items: center;
              cursor: pointer;
              img {
                margin-left: 4px;
              }
            }
          }
        }
        .source-type {
          display: flex;
          align-items: center;
          img {
            width: 24px;
            height: 24px;
            margin-right: 8px;
          }
          svg {
            width: 24px;
            height: 24px;
            margin-right: 8px;
          }
        }
        .edit-information {
          visibility: hidden;
          cursor: pointer;
          img {
            width: 24px;
            height: 24px;
            margin: 0px !important;
          }
        }
      }
      .moreoption {
        display: block;
      }
      .moreoption-active {
        display: none;
      }
    }
  }
  .table-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    .table-action-icon {
      margin-right: 12px;
      cursor: pointer;
      .action-normal {
        display: block;
      }
      .action-active {
        display: none;
      }
      &:hover {
        .action-normal {
          display: none;
        }
        .action-active {
          display: block;
        }
      }
    }
  }
  .empty-table {
    &:hover {
      background-color: inherit !important;
    }
    td {
      text-align: center;
      border-bottom: 0;
    }
    .no-data-card {
      width: 100%;
      box-shadow: none;
      background-color: transparent;
    }
  }
  .table-loader {
    &:hover {
      background-color: inherit !important;
    }
    td {
      border: none;
      .load {
        min-height: 80vh;
      }
    }
  }
  .data-centered {
    text-align: center;
  }
}
