// =============================================================================
// TOOLS / #PANEL
// =============================================================================

// @include panel-indicator()
// ==============================================

// The panel indicator should be applied to an element when the associated panel
// is open. It is convention to use a state class such as `.is-selected`.
//
// Example usage:
//
// Light Panel theme:
//  .c-component.is-selected {
//    @include panel-indicator();
//  }
//
// Dark Panel theme:
//  .c-component.c-component--dark.is-selected {
//    @include panel-indicator("dark");
//  }
//
// Adds panel indicator to show relationship with element that opened it.
@mixin panel-indicator($theme: "default") {
  $indicator-arrow-size: 22px !default;
  $indicator-arrow-color: color(white);

  /**
   * Arrow markers to signify panel relationship.
   *
   * 1. Positions the marker between element and panel
   * 2. Need to take off an extra pixel here to allow for browser rendering/
   *    rounding quirks.
   * 3. Rotate 45deg to allow it to mask the panel gradient and look like a
   *    notch in the panel (webkit placed after to prevent render quirk)
   * 4. Box-shadow that matches the panel background color to smooth the
   *    shadow transition
   * 5. Inset box-shadow that is offset to be visible only on the top edges
   */
  margin-bottom: $global-spacing-unit;
  position: relative;
  z-index: z-index(1);

  &::before,
  &::after {
    display: block;
    content: "";
    position: absolute;  /* [1] */
    bottom: -$global-spacing-unit - ($indicator-arrow-size / 2) - 1px; /* [1, 2] */
    left: 50%;  /* [1] */
    width: $indicator-arrow-size;
    height: $indicator-arrow-size;
    margin-left: -$indicator-arrow-size / 2; /* [1] */
    -ms-transform: rotate(45deg); /* [3] */
    transform: rotate(45deg); /* [3] */
    -webkit-transform: translate3d(0, 0, 0) rotate(45deg); /* [3] */
  }

  @if $theme == "default" {
    &::before {
      box-shadow: 5px 5px 8px $indicator-arrow-color; /* [4] */
    }

    &::after {
      background-color: $indicator-arrow-color;
      box-shadow: inset $indicator-arrow-size / 2 $indicator-arrow-size / 2 $indicator-arrow-size / 2 (-$indicator-arrow-size / 2) #9f9f9f; /* [5] */
    }
  } @else if $theme == "dark" {
    &::before {
      box-shadow: 5px 5px 8px color(grey-50); /* [4] */
    }

    &::after {
      background-color: color(grey-50);
      box-shadow: inset $indicator-arrow-size / 2 $indicator-arrow-size / 2 $indicator-arrow-size / 2 (-$indicator-arrow-size / 2) color(black); /* [5] */
    }
  } @else {
    @warn "`#{$theme}` is not a valid theme, it must be `default` or `dark`.";
  }
}