@import '../jnt-variables';
@import '../elements/icon';
@import '../jnt-hosts';
@import '../jnt-utils';
@import '../jnt-functions';

$accordion-marker-height: 2px;
@mixin jnt-accordion($passed: (), $context: null, $strategy: 'changes') {
  $defs: ();
  $vars: $passed;
  $declare: false;
  $wrapper: null;
  @if $jnt-ng-deep {
    $wrapper: '::ng-deep';
  }
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-accordion-host)} {
    @if $declare {
      @include reset-default();
      display: block;
      background-color: $jnt-primary-background;
      padding: $jnt-gutter-normal;
      border-radius: $jnt-corner-normal;
      border: 1px solid $jnt-page-background;
    }
  }
  #{$context} #{$wrapper} [data-title][child-of=jnt-accordion-host] {
    @if $declare {
      border-bottom: $accordion-marker-height solid $jnt-secondary-color;
      padding: ($jnt-gutter-small + $accordion-marker-height) 0;
      color: $jnt-primary-text-color;
      display: flex;
      align-items: center;
      cursor: pointer;
      line-height: 1.6;
      user-select: none;
      text-decoration: none;
      &[active='true'] {
        color: $jnt-primary-light-color;
        border-color: $jnt-primary-light-color;
        [data-chevron][child-of=jnt-accordion-host] {
          @include jnt-icon((color: $jnt-primary-light-color), '&');
        }
      }
      &:hover {
        &[active='false'] {
          color: $jnt-primary-light-color;
          [data-chevron][child-of=jnt-accordion-host] {
            @include jnt-icon((color: $jnt-primary-light-color), '&');
          }
        }
      }
    }
    span[child-of=jnt-accordion-host] {
      @if $declare {
        margin: 0 $jnt-gutter-tiny;
      }
    }
    [data-state][child-of=jnt-accordion-host] {
      @if $declare {
        margin-left: auto;
        line-height: 1;
        [data-warning][child-of=jnt-accordion-host] {
          @include jnt-icon((color: $jnt-fail-color, size: $jnt-font-size-normal), '&');
        }
        [data-chevron][child-of=jnt-accordion-host] {
          @include jnt-icon((size: $jnt-font-size-tiny), '&');
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-content][child-of=jnt-accordion-host] {
    @if $declare {
      padding: $jnt-gutter-normal 0;
    }
  }
}
@if $jnt-debug {
  @debug 'accordion compiled';
}