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

@mixin popover-padding($padding) {
  & {
    padding: $padding;
  }
}
@mixin jnt-popover($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    spacing: 12px,
    padding: (
      tiny: $jnt-gutter-tiny,
      small: $jnt-gutter-small,
      normal: $jnt-gutter-normal,
      big: $jnt-gutter-big,
      large: $jnt-gutter-large,
      huge: $jnt-gutter-huge
    ),
    background: $jnt-primary-background
  );
  $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-popover-host)} {
    @if $declare {
      @include reset-default();
      position: absolute;
      z-index: 100;
      user-select: text;
      padding: 0;
      display: none;
      box-sizing: border-box;
    }
    @include for-mobile() {
      @if $declare {
        box-sizing: border-box;
        max-width: 100%;
        max-height: 100vh;
      }
    }
    [data-arrow][child-of=jnt-popover-host] {
      @if $declare {
        position: absolute;
      }
      fill: map-get($vars, background);
      [data-inner][child-of=jnt-popover-host] {
        filter: if($jnt-theme-type == 'light', url(#popover_marker_shadow-light), url(#popover_marker_shadow-dark));
      }
    }
    &[data-dropdown='false'] {
      padding: map-get($vars, spacing);
    }
    &[data-dropdown='true'] {
      @if $declare {
        &[data-placement='bottom'], &[data-placement='rightBottom'] {
          padding: $jnt-gutter-tiny 0 0;
        }
        &[data-placement='top'] {
          padding: 0 0 $jnt-gutter-tiny;
        }
        &[data-placement='right'] {
          padding: 0 0 0 $jnt-gutter-tiny;
        }
        &[data-placement='left'] {
          padding: 0 $jnt-gutter-tiny 0 0;
        }
        [data-arrow][child-of=jnt-popover-host] {
          display: none;
        }
      }
      @include for-mobile() {
        padding: $jnt-gutter-tiny map-get($vars, spacing) map-get($vars, spacing);
      }
    }
    &[data-placement='top'] {
      [data-arrow][child-of=jnt-popover-host] {
        @if $declare {
          transform: translateX(-50%);
          bottom: 0;
        }
      }
    }
    &[data-placement='right'] {
      [data-arrow][child-of=jnt-popover-host] {
        @if $declare {
          transform: translateY(-50%) rotate(90deg);
          left: 0;
        }
      }
    }
    &[data-placement='bottom'] {
      [data-arrow][child-of=jnt-popover-host] {
        @if $declare {
          transform: translateX(-50%) rotate(180deg);
          top: 0;
        }
      }
    }
    &[data-placement='rightBottom'] {
      [data-arrow][child-of=jnt-popover-host] {
        @if $declare {
          transform: translateX(-50%) rotate(180deg);
          top: 0;
        }
      }
    }
    &[data-placement='left'] {
      [data-arrow][child-of=jnt-popover-host] {
        @if $declare {
          transform: translateY(-50%) rotate(-90deg);
          right: 0;
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-wrapper][child-of=jnt-popover-host] {
    @if $declare {
      border-radius: $jnt-corner-small;
      box-shadow: $jnt-shadow-normal;
      overflow: auto;
      box-sizing: border-box;
      &[data-windows='true'] {
        @include jnt-scrollbar();
      }
    }
    background-color: map-get($vars, background);
    @if map-has-key($vars, padding) {
      $padding: map-get($vars, padding);
      @each $padding, $map in $padding {
        &[data-padding = '#{$padding}'] {
          @include popover-padding($map);
        }
      }
    }
    [data-title][child-of=jnt-popover-host] {
      @if $declare {
        font-weight: $jnt-font-weight-bold;
        margin-bottom: $jnt-gutter-normal;
        color: $jnt-primary-text-color;
      }
    }
    [data-content][child-of=jnt-popover-host] {
      @if $declare {
        max-width: 300px;
        color: $jnt-primary-text-color;
      }
    }
  }
}
@if $jnt-debug {
  @debug 'popover compiled';
}