/*
* Accordion component
*
*/

@use '../../../style/core/utilities.scss' as utilities;

.dnb-accordion {
  // tokens
  --accordion-color-text: var(--accordion-color-text--default);
  --accordion-color-description: var(
    --accordion-color-description--default
  );
  --accordion-color-bg: var(--accordion-color-bg--default);
  --accordion-color-border: var(--accordion-color-border--default);
  // border
  --accordion-border-width: var(
    --accordion-border-width--default,
    0.0625rem
  );
  --accordion-border-radius: var(--token-radius-md);
  --accordion-easing: var(--easing-default);
  --accordion-border-inset: var(--accordion-border-inset--default, inset);

  // 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;

    color: var(
      --accordion-color-text,
      var(--accordion-color-text--default)
    );
    background-color: var(--accordion-color-bg);
    box-shadow: var(--ui-accordion-box-shadow);
    border: none;

    border-radius: var(--accordion-border-radius);

    @include utilities.hover() {
      --accordion-color-text: var(--accordion-color-text--hover);
      --accordion-color-description: var(
        --accordion-color-description--hover
      );
      --accordion-color-bg: var(--accordion-color-bg--hover);
      --accordion-color-border: var(--accordion-color-border--hover);
      --accordion-border-width: var(--accordion-border-width--hover);
      --accordion-border-inset: var(--accordion-border-inset--hover);
    }

    &--after-click {
      @include utilities.hover() {
        --accordion-color-text: var(--accordion-color-text--after-click);
        --accordion-color-description: var(
          --accordion-color-description--after-click
        );
        --accordion-color-bg: var(--accordion-color-bg--after-click);
        --accordion-color-border: var(
          --accordion-color-border--after-click
        );
      }
    }

    @include utilities.active() {
      --accordion-color-text: var(--accordion-color-text--active);
      --accordion-color-description: var(
        --accordion-color-description--active
      );
      --accordion-color-bg: var(--accordion-color-bg--active);
      --accordion-color-border: var(--accordion-color-border--active);
      --accordion-border-width: var(--accordion-border-width--active);
      --accordion-border-inset: var(--accordion-border-inset--active);
    }

    @include utilities.focusVisible() {
      --accordion-color-text: var(--accordion-color-text--focus);
      --accordion-color-description: var(
        --accordion-color-description--focus
      );
      --accordion-color-bg: var(--accordion-color-bg--focus);
      --accordion-color-border: var(--accordion-color-border--focus);
      --accordion-border-width: var(--accordion-border-width--focus);
      --accordion-border-inset: var(--accordion-border-inset--focus);
    }

    &[disabled] {
      --accordion-color-text: var(--accordion-color-text--disabled);
      --accordion-color-bg: var(--accordion-color-bg--disabled);
      --accordion-color-border: var(--accordion-color-border--disabled);
      --accordion-color-description: var(
        --accordion-color-description--disabled
      );
    }
    // ensure that onMouseOutHandler works properly
    * {
      pointer-events: none;
    }

    &--prevent-click {
      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);

      @include utilities.reducedMotion() {
        transition-duration: 0.01ms;
      }
    }
    &--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;
    }
    // Variant: "outlined"
    &--outlined {
      @include utilities.hover() {
        z-index: 1;
      }
    }

    // Shared variant properties
    &--outlined,
    &--filled {
      // Border
      --ui-accordion-box-shadow: var(
          --accordion-border-inset,
          var(--accordion-border-inset--default)
        )
        0 0 0
        var(
          --accordion-border-width,
          var(--accordion-border-width--default)
        )
        var(
          --accordion-color-border,
          var(--accordion-color-border--default)
        );
    }

    // State: "expanded"
    &--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 {
      color: var(
        --accordion-color-description,
        var(--accordion-color-description--default)
      );
      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);

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

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

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

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

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

    @include utilities.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);

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

        &__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 utilities.allAbove(small) {
      transform: rotate(-90deg);
    }
  }

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

        @include utilities.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;
  }

  // Variant: "tertiary"
  &__variant--tertiary {
    display: inline-flex;

    border: none;
    background: none;
    box-shadow: none;

    .dnb-accordion__tertiary-button {
      .dnb-icon {
        transition: transform 0.4s var(--easing-default);

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

    &.dnb-accordion--expanded .dnb-accordion__tertiary-button .dnb-icon {
      transform: rotate(180deg);
    }

    &.dnb-accordion--expanded
      .dnb-accordion__tertiary-button.dnb-button--icon-position-left
      .dnb-icon {
      transform: rotate(-180deg);
    }
  }
}