table {
  width: 100%;
  color: var(--color);
  border-collapse: separate;
  border-spacing: 0;

  button,
  details > [role="button"],
  details[open] > [role="button"] {
    max-width: fit-content;
    padding: .25rem .5rem !important;
    margin: 0 0 0 auto;

    .icon {
      margin: .25rem;
    }
  }

  .cover {
    width: 24px;
    height: 24px;
    float: left;
    margin-right: .25rem;
  }

  .icon {
    border: none !important;
  }

  details[open] > ul {
    width: 12rem;
    transform: translateX(calc(-75%)) !important;
  }

  th {
    font-size: .8rem;
    text-align: start;
    text-transform: uppercase;
    color: var(--muted-color);
    padding: .5rem .15rem;
    user-select: none;
  }

  tbody {
    tr:not(.disabled) {
      cursor: pointer;
    }

    tr:hover,
    tr.active {
      td {
        background: var(--input-background);
      }

      td:first-child {
        border-radius: var(--border-radius) 0 0 var(--border-radius);
      }
          
      td:last-child {
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
      }
    }

    tr.active,
    tr.active a {
      color: var(--primary-color);
    }

    tr.disabled {
      color: var(--muted-color) !important;
    }
  }
}

table.numbered {
  th:first-child,
  td:first-child {
    width: 26px;
    max-width: 26px;
    text-align: center;
    color: var(--muted-color);
  }

  tbody {
    tr td:first-child {
      .number {
        display: unset;
        white-space: nowrap;
      }

      .icon {
        display: none;
      }
    }

    tr.disabled td:first-child {
      .number,
      .icon {
        display: none;
      }
    }

    tr.active,
    tr:hover {
      td:first-child {
        .number {
          display: none;
        }
        .icon {
          display: unset;
          color: var(--primary-color);
        }
      }
    }
  }
}