@use "sass:meta";
@include meta.load-css("../../_helpers/flex");
table {
  font-family: var(--font-family-body);
  border-spacing: 0;
  padding: var(--scale-600) 0;
  th {
    text-align: left;
    cursor: pointer;
    color: var(--color-text-disabled);
    font-size: var(--typography-size-body-xs);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-body-xs);
    padding: var(--scale-200) var(--scale-300);
    // validation colomn not sortable
    &:last-of-type{
      cursor: default;
    }
    svg{
      padding: var(--scale-50);
      vertical-align: middle;
    }
    // display active
    &.sort-desc,&.sort-asc{
      svg{
        background-color: var(--color-surface-disabled);
        border-radius: var(--border-radius-round);
      }
    }
    // rotate arrow when needed
    &.sort-desc {
      svg {
        rotate: 180deg;
      }
    }
  }
  tbody {
    tr:nth-child(even) {
      background-color: var(--color-surface-disabled);
    }
    td {
      color: var(--color-text-body);
      font-size: var(--typography-size-body-sm);
      font-style: normal;
      font-weight: var(--font-weight-regular);
      line-height: var(--line-height-body-sm);
      letter-spacing: var(--font-letter-spacing-default);
      padding: var(--scale-300);
      max-width: 130px;
    }
    td:last-of-type{
      max-width: 170px;
    }
    .ctas {
      gap: var(--scale-200);
    }
  }
}