@use "pix-design-tokens/breakpoints";
@use "pix-design-tokens/typography";

.pix-table {
  @extend %pix-body-s;

  min-width: 100%;
  overflow: auto;

  @include breakpoints.device-is('desktop') {
    overflow: unset;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  tbody > tr:nth-of-type(even) > :is(td, th) {
    background-color: rgba(var(--pix-neutral-20-inline), 0.80);
  }

  tbody > tr.pix-table__clickable-row {
    cursor: pointer;

    & > :is(td, th) {
      transition: background-color 0.25s ease;
    }

    &:hover > :is(td, th) {
      background-color: rgba(var(--pix-neutral-100-inline), 0.50);
    }

    &:focus > :is(td, th) {
      background-color: rgba(var(--pix-neutral-100-inline), 0.40);
    }

    &:active > :is(td, th) {
      background-color: rgba(var(--pix-neutral-100-inline), 0.75);
    }
  }

  td, th {
    padding: var(--pix-spacing-4x);

    &:first-child {
      border-top-left-radius: var(--pix-spacing-2x);
      border-bottom-left-radius: var(--pix-spacing-2x);
    }

    &:last-child {
      border-top-right-radius: var(--pix-spacing-2x);
      border-bottom-right-radius: var(--pix-spacing-2x);
    }
  }
}

.pix-table--condensed {
  th, td {
    padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
  }

  td.pix-table-column--tag,
  td.pix-table-column--link {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
}

.pix-table-header {
  &--primary th {
    background: var(--pix-primary-10);
  }

  &--orga th {
    background: var(--pix-orga-50);
  }

  &--certif th {
    background: var(--pix-certif-50);
  }

  &--admin th {
    background: var(--pix-primary-100);
  }

  th[scope='col'] {
    font-weight: var(--pix-font-bold);
    text-align: start;
    vertical-align: middle;
  }

  th[scope='row'] {
    font-weight: var(--pix-font-normal);
  }
}

.pix-table-header-container {
  display: flex;
  gap: var(--pix-spacing-1x);
  align-items: center;
}

.pix-table__caption {
  margin-bottom: var(--pix-spacing-3x);
  text-align: left;
  caption-side: top;

  @extend %pix-title-xxs;
}