/*
* Table component
*
*/

@mixin tableAccordionActiveColor {
  .dnb-table__td__button-icon .dnb-icon {
    color: var(--table-accordion-icon-color--active);
  }
}
@mixin tableAccordionDisabledColor {
  .dnb-table__td__button-icon .dnb-icon {
    color: var(--table-accordion-icon-color--disabled);
  }
}

.dnb-table {
  --table-accordion-background: var(--color-white);
  --table-accordion-header-background: var(--color-white);
  --table-accordion-border-width: 0.0625rem;
  --table-accordion-border-color: var(--color-black-20);
  --table-accordion-border: var(--table-accordion-border-width) solid
    var(--table-accordion-border-color);

  // Icon
  --table-accordion-icon-color: var(--color-sea-green);
  --table-accordion-icon-color--active: var(--color-emerald-green);
  --table-accordion-icon-color--disabled: var(--color-sea-green-30);

  // Outline
  --table-accordion-outline-color: var(--color-emerald-green);
  --table-accordion-outline-width: var(--focus-ring-width);
  --table-accordion-outline-background--active: var(--color-pistachio);

  &__th#{&}__th__button-icon {
    &.dnb-table__th {
      padding: 0;
    }

    // In case the table-layout is fixed
    &,
    div {
      width: 3.5rem;

      .dnb-table__size--medium & {
        width: 3rem;
      }
      .dnb-table__size--small & {
        width: 2.5rem;
      }

      text-indent: -300vw;
    }
  }

  &__td#{&}__td__button-icon {
    &.dnb-table__td {
      padding: 0;
    }
    user-select: none; // prevent selection on double-click
  }

  &__tr--clickable &__button {
    display: flex; // to ensure we inherit the correct size from its content
    justify-content: center;

    .dnb-icon {
      color: var(--table-accordion-icon-color);
      transition: transform 500ms var(--easing-default);

      @include reducedMotion() {
        transition-duration: 0.01ms;
      }
    }
  }
  &__tr--clickable#{&}__tr--no-animation &__button .dnb-icon,
  html[data-visual-test] &__tr--clickable &__button .dnb-icon {
    transition: none !important;
  }

  &__tr--clickable,
  &__tr__accordion-content {
    position: relative;
  }
  &__tr--clickable#{&}__tr--expanded,
  &__tr__accordion-content {
    z-index: 3; // ensure borders are visible in certain states
  }

  &__tr--clickable {
    &:active,
    html[data-whatinput='keyboard'] &:focus,
    &:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded) {
      z-index: 5; // over table outline border
    }
  }

  &__tr--clickable#{&}__tr--expanded &__button .dnb-icon {
    transform: rotate(180deg);
  }

  &__tr--clickable#{&}__tr--expanded {
    .dnb-table--border & td::after {
      border-bottom: none;
      border-left: none;
      border-right: none;
    }
  }

  &__tr--clickable#{&}__tr:not(&__tr--disabled) {
    outline: none;

    td::before {
      content: '';
      position: absolute;
      z-index: 3; // ensure we are over the "tableBorder"

      // A negative number will force the table to overflow and a scrollbar will show up
      inset: 0;

      pointer-events: none;

      // Here we use border to support Safari v16 on macOS
      // but also to only have a border on specific sides
      border: var(--table-accordion-outline-width) solid transparent;
    }
    td:not(:first-of-type)::before {
      border-left: none;
    }
    td:not(:last-of-type)::before {
      border-right: none;
    }

    @include hover() {
      td::before {
        border-color: var(--table-accordion-outline-color);
      }

      @include tableAccordionActiveColor();
    }
  }

  &--border
    tbody
    &__tr--clickable:not(#{&}__tr--expanded):not(&__tr--last)
    &__td::before {
    bottom: calc(var(--table-border-width) * -1);
  }

  &__tr--clickable#{&}__tr--expanded:not(&__tr--disabled):hover &__td {
    background-color: var(--color-white);
  }

  &__tr--clickable#{&}__tr:not(&__tr--disabled):not(:active):not(
      :hover
    ):focus {
    td::before {
      @include whatInput(keyboard) {
        border-color: var(--focus-ring-color);
        border-width: var(--focus-ring-width);
      }
    }
    td:first-of-type::before {
      left: 0;
    }
    td:last-of-type::before {
      right: 0;
    }
  }

  &__tr--clickable#{&}__tr:not(&__tr--disabled):active {
    html:not([data-whatintent='touch']) &:hover td::before,
    td::before {
      border-color: var(--table-accordion-outline-color);
      border-width: var(
        --table-accordion-border-width
      ); // TODO: we should have something like activeRingWidth
    }
  }

  &__tr--clickable#{&}__tr:not(&__tr--disabled):active &__td {
    background-color: var(--table-accordion-outline-background--active);

    @include tableAccordionActiveColor();
  }

  &__tr--clickable#{&}__tr--expanded:not(
      &__tr--disabled
    )#{&}__tr--hover:not(:active):hover
    &__td {
    background-color: var(--table-accordion-header-background);

    &::before {
      border: none;
      border-top: var(--table-accordion-border);
    }
  }

  &__tr--clickable#{&}__tr#{&}__tr--expanded:not(&__tr--disabled):not(
      :active
    ):not(:hover) {
    @include whatInputNot('keyboard') {
      background-color: var(--table-accordion-header-background);

      td::before {
        border: none;
        border-top: var(--table-accordion-border);
      }
    }
  }

  &__tr--clickable#{&}__tr--disabled {
    @include tableAccordionDisabledColor();
  }

  &__tr__accordion-content {
    &__inner {
      overflow: hidden;
      will-change: height;
      transition: height 400ms var(--easing-default);

      @include reducedMotion() {
        transition-duration: 0.01ms;
      }

      &__spacing {
        padding: 1rem;

        transform: translateY(-10px);
        transition: transform 500ms var(--easing-default);

        @include reducedMotion() {
          transition-duration: 0.01ms;
        }
      }

      position: relative;
    }
    &--parallax &__inner {
      &__spacing {
        transform: translateY(0);
        html[data-visual-test] & {
          transition: none;
        }
      }
    }

    &--expanded {
      > td.dnb-table__td {
        background-color: var(--color-white);
      }

      + .dnb-table__tr--clickable .dnb-table__td {
        @include tableBorder() {
          border-top: var(--table-accordion-border);
        }
      }
    }
  }

  &__tr__accordion-content--single {
    > td {
      padding: 0 !important; // medium and small size sets padding – but we never want a padding on this td

      width: calc(100% - 3.5rem);

      .dnb-table__size--medium & {
        width: calc(100% - 3rem);
      }
      .dnb-table__size--small & {
        width: calc(100% - 2.5rem);
      }
    }

    > td::before {
      content: '';
      position: absolute;
      top: auto;
      left: 0;
      right: 0;
      bottom: calc(var(--table-accordion-border-width) * -1);

      pointer-events: none;

      border-bottom: var(--table-accordion-border);
    }

    // because, when table has --outline
    .dnb-table--outline &:last-of-type td::before {
      border-bottom: none;
    }

    // because, when table has --border
    .dnb-table--border & td::after {
      border-top: none;
    }

    > td.dnb-table__td {
      padding: 0;

      .dnb-dl,
      .dnb-dl dt {
        margin: 0;
      }
    }
  }

  &__tr__accordion-content#{&}__tr &__td {
    background-color: var(--table-accordion-background);

    /**
      * Safari on iOS and macOS has problems on animating when vertical-align is baseline.
      * What happens is that the td is not 0, even the content inside is 0. With vertical top, we omit that.
      * But we do not need baseline in this tr > td, so we reset it.
      */
    vertical-align: top;
  }

  // stylelint-disable-next-line
  &__tr--clickable:not(&__tr--disabled) {
    cursor: pointer;
  }

  // Prevent selection while animating – useful when user double-clicks
  // stylelint-disable-next-line
  &__tr--clickable:has(& + &__tr__accordion-content--animating) {
    user-select: none;
  }

  &__td-wrapper {
    display: flex;
  }
}