/*
 * Table elements
 */

@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/typography';
@use '../abstracts/mixins/breakpoints' as *;
@use '../abstracts/' as *;
$-borderRadius: map.get(variables.$border-radius, 'size-4');
$-spacing-size-8: map.get(variables.$spacing, 'size-8');
$-spacing-size-12: map.get(variables.$spacing, 'size-12');
$-spacing-size-16: map.get(variables.$spacing, 'size-16');

.pkt-table {
  width: 100%;
  border-radius: $-borderRadius;
  border-collapse: collapse;

  &__header,
  thead,
  thead.pkt-table__header th {
    text-align: left;
    vertical-align: top;
    font-size: map.get(variables.$font-size, 'size-18');
    font-weight: map.get(variables.$font-weight, 'medium');
  }

  &__header {
    border-bottom: 2px solid var(--pkt-color-border-gray);
  }

  &__body,
  tbody {
    text-align: left;
    vertical-align: top;
    font-size: map.get(variables.$font-size, 'size-16');
    font-weight: map.get(variables.$font-weight, 'light');

    .pkt-table__row:hover {
      & > .pkt-table__data-cell {
        background: var(--pkt-color-surface-strong-default);
      }
    }
  }

  &__header-cell,
  th {
    padding: $-spacing-size-12 $-spacing-size-16;
    border-bottom: none;
  }

  &__data-cell,
  td {
    padding: $-spacing-size-12 $-spacing-size-16;
    border-bottom: none;
  }
}

// To be used when the table contains several elements, such as Tags
.pkt-table__cell-wrapper {
  text-align: left;
  vertical-align: top;
  display: inline-flex;
  gap: $-spacing-size-8;
}

/**
 * Compact table
 */

.pkt-table.pkt-table--compact {
  .pkt-table__header-cell,
  th {
    padding: $-spacing-size-8 $-spacing-size-16;
  }

  .pkt-table__data-cell,
  td {
    padding: $-spacing-size-8 $-spacing-size-16;
  }
}

/**
 * Skin: basic
 */
.pkt-table.pkt-table--basic {
  .pkt-table__row,
  tr {
    border-bottom: 1px solid var(--pkt-color-border-gray);
  }
}

/**
 * Skin: zebra
 * pkt-table--zebra-blue er deprecated og fjernes i en kommende versjon.
 */
.pkt-table.pkt-table--zebra,
.pkt-table.pkt-table--zebra-blue {
  .pkt-table__body,
  tbody {
    .pkt-table__row:nth-child(odd),
    tr:nth-child(odd) {
      background: var(--pkt-color-surface-default-default);
    }
  }
}

/**
 * Responsive Mobile view if class is set
 */

@media screen and (max-width: map.get(variables.$breakpoints, 'tablet')) {
  .pkt-table.pkt-table--responsive {
    &__label-padding {
      .pkt-table__data-cell,
      td {
        &::before {
          padding-block-start: 1rem;
        }
      }
    }
    .pkt-table__header,
    thead {
      border-bottom: none;
      height: 0;
    }

    .pkt-table__row,
    tr {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: $-spacing-size-16;
      padding: $-spacing-size-16 $-spacing-size-16;

      .pkt-table__header-cell,
      th {
        display: none;
      }
    }

    .pkt-table__cell-wrapper {
      grid-column: 2/3;
    }

    .pkt-table__data-cell,
    td {
      padding: $-spacing-size-8 $-spacing-size-16;
      display: contents;

      :only-child {
        grid-column: 2/3;
      }

      &::before {
        grid-column: 1/2;
        content: attr(data-label);
        font-weight: map.get(variables.$font-weight, 'medium');
      }
    }

    &.pkt-table__compact {
      .pkt-table__row,
      tr {
        padding: $-spacing-size-8 $-spacing-size-8;
        gap: $-spacing-size-8;
      }
    }

    &.pkt-table--zebra-blue,
    &.pkt-table--zebra {
      .pkt-table__row:nth-child(odd),
      tr:nth-child(odd) {
        background: var(--pkt-color-surface-default-default);
      }
    }
  }
}