/*
* 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-md);

    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();
}

@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');