/*
* Table theme
*
*/

@import '../../../../style/core/utilities.scss';
@import '../table-mixins.scss';

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

  text-align: left;

  // head
  &__th,
  & thead th {
    // spacing
    padding: 2rem 1rem 1rem;

    // typography
    font-weight: var(--font-weight-medium);
    color: var(--theme-color-black-80, currentColor);
    font-size: var(--font-size-basis);
    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);
    }
  }

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

    // typography
    color: var(--theme-color-black-80, 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
  &:not(&--outline) > tbody {
    position: relative;

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

.dnb-table__container {
  background-color: var(--color-white);
}

.dnb-table,
.dnb-table__container {
  --table-border-color: var(--color-black-8);
  --table-outline-color: var(--color-black-8);

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