/*
* Accordion theme
*
*/

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

.dnb-accordion {
  --accordion-border-width: 0;
  --accordion-border-radius: 0;

  // vertical spacing
  --accordion-header-margin-vertical: 1rem;
  --accordion-header-margin-vertical--description: 0.5rem;

  // header
  --accordion-header-wrapper-margin--icon-right: calc(
    1.5rem - var(--sb-accordion-frame-width)
  );
  --sb-accordion-header-border-radius--expanded: 0.125rem 0.125rem 0 0;
  --sb-accordion-header-border-radius--hover: 0.125rem;
  --sb-accordion-header-border-radius--hover-expanded: 0.125rem 0.125rem 0
    0;

  // icon
  --accordion-header-icon-gutter: 0.5rem;
  --accordion-header-icon-margin: calc(
    1.5rem - var(--sb-accordion-frame-width)
  );

  // frame (left border on expand)
  --sb-accordion-frame-color: transparent;
  --sb-accordion-frame-width: 0.1875rem;
  --sb-accordion-frame-width--active: 0rem;

  // other
  --sb-accordion-content-padding-left: calc(
    3.5rem - var(--sb-accordion-frame-width)
  );
  --sb-accordion-content-border-radius: 0 0 0.125rem 0.125rem;
  --accordion-content-margin: 0;
  --accordion-content-padding: 0 1rem 1rem
    var(--sb-accordion-content-padding-left);

  color: var(--sb-color-text);

  &__header,
  &__content {
    background-color: var(--sb-accordion-background, transparent);
    border-left: var(--sb-accordion-frame-width) solid
      var(--sb-accordion-frame-color);
  }

  &__header {
    @include focus-visible() {
      @include focusRing('always');
      z-index: 1;
      border-radius: 0.125rem;
      background-color: var(--sb-color-blue-light-3);
      color: var(--border-color);

      .dnb-accordion__header__icon {
        color: var(--border-color);
      }
    }
    @include hover() {
      background-color: var(--sb-color-violet-light-2);
      border-radius: var(--sb-accordion-header-border-radius--hover);
    }

    @include active() {
      background-color: var(--sb-color-white);
      @include fakeBorder(null, null, inset);
      // must be set after fakeBorder()
      --border-color: var(--sb-color-violet);
      border-left-width: var(--sb-accordion-frame-width--active);
      padding-left: calc(
        var(--sb-accordion-frame-width) - var(
            --sb-accordion-frame-width--active
          )
      );
    }

    &__icon,
    &__container {
      color: var(--sb-color-violet);
    }

    &--icon-right {
      --accordion-header-icon-margin: 1.5rem;
      + .dnb-accordion__content {
        --sb-accordion-content-padding-left: calc(
          1.5rem - var(--sb-accordion-frame-width)
        );
        --accordion-content-padding: 0 1rem 1rem
          var(--sb-accordion-content-padding-left);
      }
    }

    // disabled
    &[disabled] {
      * {
        color: var(--sb-color-gray-dark-2);
      }
    }
  }

  &--expanded {
    --sb-accordion-background: var(--sb-color-violet-light-4);
    --sb-accordion-frame-color: var(--sb-color-violet);
    --sb-accordion-frame-width--active: 0.125rem;
    > .dnb-accordion__header {
      @include hover() {
        border-radius: var(
          --sb-accordion-header-border-radius--hover-expanded
        );
      }
      &--expanded {
        border-radius: var(--sb-accordion-header-border-radius--expanded);
      }
    }

    > .dnb-accordion__content {
      border-radius: var(--sb-accordion-content-border-radius);
    }

    // disabled
    > .dnb-accordion__header[disabled],
    > .dnb-accordion__header[disabled] + .dnb-accordion__content {
      --sb-accordion-background: var(--sb-color-gray-light-2);
      --sb-accordion-frame-color: var(--sb-color-gray-dark-2);
    }
  }
}