.tp__table {
  display: flex;
  flex-flow: column;
  gap: var(--gap-default);
  background-color: var(--card-background-color);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  overflow: hidden;
  fill: var(--modest-text-color);

  &__container {
    display: flex;
    flex-flow: column;
    padding-right: 1px;
    overflow: auto;
  }

  &__table {
    width: 100%;
    border-collapse: collapse;
    position: relative;

    thead {
      tr {
        th {
          position: sticky;
          top: 0;
          z-index: 2;
          font-size: 1.1rem;
          font-weight: bold;
          //text-align: center;
          padding: var(--padding-mini);
          background-color: var(--table-header-background-color);
          box-shadow: inset 0 -1px 0 var(--border-color);
        }
        .tp__table-header {
           display: flex;
           flex-flow: row;
           gap: var(--gap-small);
           align-items: center;
           cursor: pointer;
           .svg-icon {
             width: 1rem;
             height: 1rem;
           }
        }
      }
    }

    tbody {
      tr {
        &:nth-child(even) {
          background-color: var(--table-alternate-background-color);
        }
        &:nth-child(odd) {
        }
        &:not(:last-child) {
          border-bottom: 1px solid var(--border-color);
        }
        td {
          height: fit-content;
          vertical-align: top;
          padding: var(--padding-mini);
        }
      }
    }
  }
}