/*
* Table component
*
*/

@use 'sass:meta';
@use './table-mixins.scss' as table-mixins;
@use './table-header-buttons.scss';

.dnb-table {
  --table-th-background-color: var(--token-color-background-neutral);

  // Highlight
  --table-highlight-background: var(--token-color-decorative-first-muted);
  --table-th-highlight-border: var(--token-color-decorative-first-subtle);

  display: table;
  table-layout: auto;
  width: 100%;

  margin-top: 0;
  margin-bottom: 0.5rem; // give room to a scrollbar

  border-spacing: 0;
  border-collapse: collapse;

  &--fixed {
    table-layout: fixed;
    width: auto;
  }

  &--no-wrap {
    white-space: nowrap;
  }

  & > caption {
    position: relative;
    caption-side: bottom;
    padding: 0.5rem 0 0.5rem 1rem;

    font-size: var(--font-size-basis);
    background-color: var(--token-color-background-neutral);
    text-align: left;

    @include table-mixins.tableBorder() {
      top: calc(
        var(--table-border-width) * -1
      ); // so we are behind the border-bottom (end of table)
      right: 0;
      border-top: var(--table-border);
    }
  }

  &--outline {
    position: relative;

    // Add extra room (-10rem) in bottom for caption,
    // because firefox clip-path ignores caption
    // Use "clip-path" instead of "overflow" because display=table-row does not give the expected/same result like display=block would.
    clip-path: inset(
      0 0 -10rem 0 round var(--table-outline-radius)
        var(--table-outline-radius) 0 0
    );
    z-index: 1; // firefox places caption in from of table without z-index

    &,
    &::after {
      border-radius: var(--table-outline-radius);
    }
    @include table-mixins.tableOutline() {
      z-index: 3;
      border: var(--table-outline);
    }

    > caption {
      &,
      &::after {
        border-radius: 0 0 var(--table-outline-radius)
          var(--table-outline-radius);
      }
      &:not(.dnb-sr-only) ~ tbody:last-child {
        .dnb-table__tr:last-child,
        .dnb-table__tr--clickable.dnb-table__tr--last {
          clip-path: none;

          .dnb-table__th,
          .dnb-table__td {
            &,
            &::before,
            &::after {
              border-radius: 0;
            }
          }
        }
      }
    }
  }

  &.dnb-skeleton {
    > * {
      -webkit-text-fill-color: var(--skeleton-color);
    }
  }

  // When used in a Card without inner space
  .dnb-card--no-inner-space & {
    --table-outline-radius: var(--rounded-corner, var(--token-radius-md));
    --table-outline-color: transparent;
    margin-bottom: 0;
  }

  // Keep rounded corners in sync with the parent Card.
  .dnb-card & {
    --table-outline-radius: var(--rounded-corner, var(--token-radius-md));
  }

  // Reset Table spacing
  .dnb-spacing & {
    p,
    ul,
    ol,
    dl,
    pre {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  /* stylelint-disable-next-line no-descending-specificity */
  &,
  &__container {
    --table-border-color: var(--token-color-stroke-neutral-subtle);
    --table-outline-color: var(--token-color-stroke-neutral-subtle);

    // table border
    --table-border-width: 0.0625rem;
    --table-border: var(--table-border-width) solid
      var(--table-border-color);

    // table outline
    --table-outline-width: 0.0625rem;
    --table-outline: var(--table-outline-width) solid
      var(--table-outline-color);
    --table-outline-radius: var(--token-radius-xl);

    html[data-visual-test] & {
      --table-border-color: blue;
      --table-outline-color: red;
      --table-accordion-border-color: green;
      --table-th-highlight-border: magenta;
    }
  }

  @include table-header-buttons.buttonsInTable();

  text-align: left;

  // Variants
  /* stylelint-disable-next-line no-descending-specificity */
  &,
  &__th--emphasis {
    --table-th-text-color: currentcolor;
    --table-th-font-weight: var(--font-weight-medium);
    --table-th-font-size: var(--font-size-basis);
  }
  &__th--subtle {
    --table-th-text-color: var(--token-color-text-neutral-alternative);
    --table-th-font-weight: var(--font-weight-medium);
    --table-th-font-size: var(--font-size-basis);

    &#{&} {
      padding-top: 1.5rem;
      padding-bottom: 0.5rem;
    }
  }

  // Header
  /* stylelint-disable no-descending-specificity */
  &__th,
  & thead th {
    // spacing
    padding: 2rem 1rem 1rem;

    // typography
    font-weight: var(--table-th-font-weight);
    color: var(--table-th-text-color);
    font-size: var(--table-th-font-size);
    line-height: var(--line-height-basis);
    vertical-align: bottom;

    .dnb-table__size--medium & {
      // spacing
      padding: 1.375rem 1rem 0.875rem;

      // typography
      font-size: var(--font-size-small);
      line-height: var(--line-height-small);

      .dnb-button__text {
        line-height: inherit;
      }
    }

    .dnb-table__size--small & {
      // spacing
      padding: 1.25rem 1rem 0.5rem;

      // typography
      font-size: var(--font-size-small);
      line-height: var(--line-height-small);
    }
  }
  /* stylelint-enable no-descending-specificity */

  // body data
  /* stylelint-disable */
  &__td,
  & tbody &__th,
  & tbody td,
  & tbody th {
    // spacing
    padding: 1rem;

    // typography
    color: currentcolor;
    font-size: var(--font-size-basis);
    line-height: var(--line-height-basis);
    vertical-align: baseline;
  }

  & tbody &__th,
  & tbody th {
    // spacing
    padding: 1rem;

    // typography
    vertical-align: baseline;
  }

  tbody &__th,
  tbody &__td,
  tbody th,
  tbody td {
    .dnb-table__size--medium & {
      // spacing
      padding: 0.875rem 1rem;

      // typography
      font-size: var(--font-size-small);
      line-height: var(--line-height-small);
    }

    .dnb-table__size--small & {
      // spacing
      padding: 0.625rem 1rem;

      // typography
      font-size: var(--font-size-small);
      line-height: var(--line-height-small);
    }
  }
  /* stylelint-enable */

  // bottom border
  /* stylelint-disable-next-line no-descending-specificity */
  &:not(&--outline):not(&--no-border) > tbody {
    position: relative;

    @include table-mixins.tableBorder() {
      border-bottom: var(--table-border);
    }

    // The tableBorder mixin uses right: -0.0625rem to avoid gaps between
    // adjacent cell borders, but for a full-width tbody border this offset
    // causes horizontal overflow that triggers a scrollbar in ScrollView.
    &::after {
      right: 0;
    }
  }
}

@include meta.load-css('table-th');
@include meta.load-css('table-td');
@include meta.load-css('table-tr');
@include meta.load-css('table-cell');
@include meta.load-css('table-sticky');
@include meta.load-css('table-container');
@include meta.load-css('table-accordion');