.table-container {
  overflow-x: auto;
  // position: relative;
}

.table {
  width: 100%;

  th {
    font: var(--font-sm);
    font-weight: 600;
    color: var(--theme-secondary-color);
    padding: 24px;

    // &:first-child {
    //   position: sticky;
    //   left: 0;
    //   z-index: 2;
    //   background-color: var(--theme-card-color);

    //   &::after {
    //     content: '';
    //     position: absolute;
    //     top: 0;
    //     bottom: 0;
    //     right: 0;
    //     width: 4px;
    //     background-image: linear-gradient(to right, rgba(var(--theme-border-color-rgb), 0.5), transparent);
    //   }
    // }
  }

  td {
    padding: 16px 24px;

    &:first-child {
      border-left: 2px solid transparent;

      // position: sticky;
      // left: 0;
      // z-index: 2;
      // background-color: var(--theme-card-color);

      // &::after {
      //   content: '';
      //   position: absolute;
      //   top: 0;
      //   bottom: 0;
      //   right: 0;
      //   width: 4px;
      //   background-image: linear-gradient(to right, rgba(var(--theme-border-color-rgb), 0.5), transparent);
      // }
    }
  }

  tr {
    border-bottom: 1px solid var(--theme-border-color);

    &:hover {
      td {
        &:first-child {
          border-left-color: var(--theme-red-color);
        }
      }
    }
  }
}

.table-separated {
  --border-color: rgba(0, 0, 0, 0.04);

  border-collapse: separate;
  border-spacing: 0 8px;
  width: 100%;

  [data-theme='dark'] & {
    --border-color: rgba(255, 255, 255, 0.04);
  }

  thead {
    th {
      background-color: rgba(0, 0, 0, 0.02);
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      padding: 20px 12px;
      font: var(--font-sm-semibold);
      color: var(--theme-secondary-color);

      [data-theme='dark'] & {
        background-color: rgba(255, 255, 255, 0.02);
      }

      &:first-of-type {
        border-radius: 4px 0 0 4px;
        border-left: 1px solid var(--border-color);
        padding-left: 24px;
      }

      &:last-of-type {
        border-radius: 0 4px 4px 0;
        border-right: 1px solid var(--border-color);
        padding-right: 24px;
      }
    }
  }

  tbody {
    tr {
      box-shadow: 0 2px 4px rgba(6, 10, 13, 0.04);

      &:hover {
        box-shadow: 0 16px 32px rgba(255, 67, 57, 0.04);

        td {
          border-color: var(--theme-red-color);
        }

        .arrowIcon {
          visibility: visible;
        }
      }
    }

    td {
      background-color: var(--theme-card-color);
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      padding: 24px 12px;
      white-space: nowrap;

      &:first-of-type {
        border-radius: 4px 0 0 4px;
        border-left: 1px solid var(--border-color);
        padding-left: 24px;
      }

      &:last-of-type {
        border-radius: 0 4px 4px 0;
        border-right: 1px solid var(--border-color);
        padding-right: 24px;
        position: relative;
      }
    }
  }
}
