/* ============================================================================
   @OBJECTS -> DROP DOWN
   ========================================================================= */


/**
 * A generic drop down object powered by some JavaScript which toggles a
 * class e.g. `is-visible` on the drop down trigger (the button that makes the
 * drop down visible and invisible) and the target (the actual drop down).
 * This class will be used to make the drop down target visible when the
 * trigger is selected. There is also a version for showing the drop down via
 * the `:hover` pseudo class which is turned off for touch devices.
 *
 * The objects block class, its modifier class(s), and its element class(s)
 * (available as silent placeholder selectors also):
 *
   .o-drop-down
   .o-drop-down__target
 *
 * @markup
   <div class="o-drop-down [modifier]">
     <!-- The trigger -->
     <button class="o-drop-down__trigger"> [...] </button>
     <!-- The target -->
     <div class="o-drop-down__target"> [...] </div>
   </div>
 */


/**
 * Settings.
 */

/**
 * Apply at these breakpoints (turned off by default).
 */

$o-drop-down-apply-at-breakpoints:                  $default-breakpoints !default;

// From the above breakpoints choose what you wish to apply it too
$o-drop-down-apply-at-breakpoints-for-default:      false !default;

$o-drop-down-apply-at-breakpoints-for-target:       false !default;

$o-drop-down-apply-at-breakpoints-for-target-right: false !default;

$o-drop-down-apply-at-breakpoints-for-on-hover:     false !default;

/**
 * State classes.
 */

// The state class that is powered by JavaScript
$o-drop-down-state-class:                        is-visible !default;

// Class that is used to identify touch support
$o-drop-down-touch-support-class:                is-touch !default;


/**
 * Drop down container for the trigger and target.
 *
 * 1. Sets the positioning context for the target.
 */

%o-drop-down,
.o-drop-down {
  position: relative; // [1]
}

@if $o-drop-down-apply-at-breakpoints-for-default {
  @include generate-at-breakpoints('.o-drop-down',
    $o-drop-down-apply-at-breakpoints) {
    position: relative;
  }
}


  /**
   * The target, the actual drop down.
   */

  %o-drop-down__target,
  .o-drop-down__target {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;

    // Show the drop down via the JavaScript powered state class.
    &.#{$o-drop-down-state-class} {
      display: block;
    }
  }

  @if $o-drop-down-apply-at-breakpoints-for-target {
    @include generate-at-breakpoints('.o-drop-down__target',
      $o-drop-down-apply-at-breakpoints) {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;

      &.#{$o-drop-down-state-class} {
        display: block;
      }
    }
  }// endif


  /**
   * Modifier: position to the right instead of the left.
   */

  %o-drop-down__target--right,
  .o-drop-down__target--right {
    left: auto;
    right: 0;
  }

  @if $o-drop-down-apply-at-breakpoints-for-target-right {
    @include generate-at-breakpoints('.o-drop-down__target--right',
      $o-drop-down-apply-at-breakpoints) {
        left: auto;
        right: 0;
    }
  }


  /**
   * Disable for touch devices as they don't have `:hover` support.
   *
   * N.B. this will require functionality that can append a hook to an element
   * (typically the `html` element) if touch is supported.
   */

  %o-drop-down__trigger--hover:hover,
  .o-drop-down__trigger--hover:hover {
    + %o-drop-down__target,
    + .o-drop-down__target {
      display: block;
    }
  }

  // Hide for touch devices
  .#{$o-drop-down-touch-support-class} %o-drop-down__target,
  .#{$o-drop-down-touch-support-class} .o-drop-down__target {
    display: none !important;
  }

  @if $o-drop-down-apply-at-breakpoints-for-on-hover {
    @include generate-at-breakpoints('.o-drop-down__trigger--hover{bp}:hover + .o-drop-down__target',
      $o-drop-down-apply-at-breakpoints) {
      display: block;
    }
  }