/*
* Accordion component
*
*/

@import '../../../style/core/utilities.scss';

.dnb-accordion {
  --accordion-border-width: 0.0625rem;
  --accordion-border-radius: 0.5rem;
  --accordion-easing: var(--easing-default);

  // vertical spacing
  --accordion-header-margin-vertical: 1.25rem;
  --accordion-header-margin-vertical--description: 0.75rem;

  // wrapper
  --accordion-header-wrapper-margin: 1rem;
  --accordion-header-wrapper-margin--icon-right: 1rem;

  // icon
  --accordion-header-icon-gutter: 1rem;
  --accordion-header-icon-margin: 1rem;
  --accordion-header-icon-alignment: flex-start;

  // Title
  --accordion-title-font-weight: var(--font-weight-basis);
  --accordion-title-font-weight--expanded: var(--font-weight-medium);

  // Content
  --accordion-content-margin: 1rem 0 0 0;
  --accordion-content-padding: 0;

  position: relative;

  display: flex;
  flex-direction: column;

  font-size: var(--font-size-small);
  line-height: var(--line-height-basis);

  &__header {
    display: flex;
    align-items: center;

    cursor: pointer;
    outline: none;

    border: var(--accordion-border-width) solid transparent;
    border-radius: var(--accordion-border-radius);

    &:focus {
      user-select: none;
    }

    // ensure that onMouseOutHandler works properly
    * {
      pointer-events: none;
    }

    &--prevent-click {
      user-select: none;
      pointer-events: none;
    }

    &__wrapper {
      display: flex;
      flex-direction: column;
      width: 100%; // this pushes the &__container to the right

      margin: var(--accordion-header-margin-vertical)
        var(--accordion-header-wrapper-margin)
        var(--accordion-header-margin-vertical) 0;
    }
    &--description &__wrapper {
      margin-top: var(--accordion-header-margin-vertical--description);
      margin-bottom: var(--accordion-header-margin-vertical--description);
    }

    &__container {
      margin: 0 1rem;
    }
    &__icon {
      align-self: var(--accordion-header-icon-alignment);

      margin: var(--accordion-header-margin-vertical)
        var(--accordion-header-icon-gutter)
        var(--accordion-header-margin-vertical)
        var(--accordion-header-icon-margin);

      font-size: var(--font-size-small);
      line-height: var(
        --line-height-small
      ); // to ensure correct icon height
      transition: transform 400ms var(--accordion-easing);
    }
    &--description &__icon {
      margin-top: var(--accordion-header-margin-vertical--description);
    }
    &--icon-right {
      justify-content: space-between;
    }
    &--icon-right &__icon {
      margin-right: var(--accordion-header-icon-margin);
      margin-left: var(--accordion-header-icon-gutter);
      order: 3;
    }
    &--icon-right &__container {
      order: 1;
    }
    &--icon-right &__wrapper {
      order: 2;
      margin-right: 0;
      margin-left: var(--accordion-header-wrapper-margin--icon-right);
    }
    &--icon-right &__wrapper + &__container {
      margin-right: 0;
    }
    &--icon-right &__container + &__wrapper {
      margin-left: 0;
    }

    &--expanded {
      --accordion-title-font-weight: var(
        --accordion-title-font-weight--expanded
      );
    }

    &__title {
      font-size: var(--font-size-basis);
      line-height: var(--line-height-basis);
      font-weight: var(--accordion-title-font-weight);
    }

    &__description {
      font-size: var(--font-size-small);
      line-height: var(--line-height-small);
      font-weight: var(--font-weight-basis);
    }
    &__title + &__description {
      margin-top: 0.25rem;
    }
    &__description + &__title {
      margin-top: 0.25rem;
    }
  }

  &--expanded > &__header &__header__icon {
    transform: rotate(-180deg);
  }

  &__content {
    display: flex;
    width: 100%;

    will-change: height;
    transition:
      height 400ms var(--accordion-easing),
      opacity 600ms var(--accordion-easing);

    &__inner {
      width: 100%;
      margin: var(--accordion-content-margin);
      padding: var(--accordion-content-padding);
    }
  }

  &-group--single-container {
    transition: min-height 1s var(--accordion-easing);
  }

  &-group--single-container & {
    position: static;
    max-width: 60rem;

    @include allAbove(small) {
      &__header {
        width: 40%; // 40% / 60%
      }

      // Only to make sure we have a spacing. But would be typically project specific
      &__content {
        margin-left: 1rem;

        // Slower down the animation if single container is used
        transition: opacity 1s var(--accordion-easing);

        &__inner {
          margin-top: 0;
        }
      }
    }

    // NB: This has a negative side effect once it is integrated in a 60rem max-width container
    // @media screen and (min-width: 80em) {
    //   &__header {
    //     width: 44rem;
    //   }
    // }
  }
  &-group--single-container & > &__header &__header__icon {
    @include allAbove(small) {
      transform: rotate(-90deg);
    }
  }

  &-group {
    &--single-container & {
      &__children {
        max-width: 60rem;

        @include allAbove(small) {
          position: relative;
          display: flex;
          flex-direction: column;

          .dnb-accordion__content {
            position: absolute;
            z-index: 10;
            top: 0;
            right: 0;
            // Do not set bottom here, it messes up the offsetHeight in JS

            width: 60%; // 40% / 60%
          }
        }

        // NB: This has a negative side effect once it is integrated in a 60rem max-width container
        // @media screen and (min-width: 80em) {
        //   .dnb-accordion__content {
        //     left: 44rem;
        //   }
        // }
      }
    }
  }

  // stylelint-disable-next-line
  & > &__header--no-animation &__header__icon,
  html[data-visual-test] & &__header &__header__icon {
    transition: none;
  }
}