.table {
  border-radius: var(--codex-border-radius);
  overflow-x: auto;

  table {
    border-spacing: 0 12px;
    width: 100%;

    thead {
      tr {
        border-bottom: 1px solid var(--codex-border-color);
        border-radius: 8px;

        th {
          color: var(--codex-color-light);
          font-weight: normal;
          text-transform: capitalize;
          font-size: 0.9rem;
          text-align: left;
          height: 36px;
          padding: 0 16px;
          box-sizing: border-box;
          background-color: #232323;

          &[role="button"] {
            cursor: pointer;
          }

          div {
            display: flex;
            align-items: center;
            gap: 0.5rem;
          }

          svg {
            position: relative;
            cursor: pointer;
          }

          svg {
            opacity: 0.6;
            transition: opacity 0.35s;
          }

          &[aria-sort="ascending"] svg:first-child {
            opacity: 1;
          }

          &[aria-sort="descending"] svg:nth-child(2) {
            opacity: 1;
          }

          &:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
          }

          &:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
          }
        }
      }
    }

    tbody {
      tr {
        border-bottom: 1px solid var(--codex-border-color);
        transition: background-color 0.35s;
        border-radius: 8px;

        &:hover {
          background-color: var(--codex-background-light);
        }

        td {
          text-align: left;
          height: 64px;
          box-sizing: border-box;
          background-color: #232323;
          padding: 0 12px;
          font-family: Inter;
          font-size: 14px;
          font-weight: 400;
          line-height: 16px;
          letter-spacing: -0.006em;

          &:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
          }

          &:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
          }
        }

        /* &::after {
          content: " ";
          width: 100%;
          height: 1px;
          display: inline-block;
          background: #96969633;
          position: absolute;
          bottom: -7px;
          left: 0;
        } */
      }
    }
  }

  > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;

    p {
      margin-top: 0.5rem;
      margin-bottom: 0;
    }
  }
}