/*
* Table component
*
*/

@import './table-mixins.scss';
@import './table-header-buttons.scss';

.dnb-table,
.dnb-table__container {
  // 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: 0.5rem;
}

.dnb-table {
  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(--color-white);
    text-align: left;

    @include 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 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
  .dnb-card & {
    --table-outline-color: transparent;
    margin-bottom: 0;
  }

  @include buttonsInTable();
}

@import './table-th.scss';
@import './table-td.scss';
@import './table-tr.scss';
@import './table-cell.scss';
@import './table-sticky.scss';
@import './table-container.scss';
@import './table-accordion.scss';

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