/// Basic styles to display a dropdown.
///
/// @group dropdowns
///
/// @example scss - usage
///   @include k-Dropdown;
///
/// @example html
///   <div class="k-Dropdown">
///     <button class="k-Dropdown__button">My dropdown</button>
///     <nav class="k-Dropdown__content">
///       <ul>
///         <li><a href="#">Link 1</a></li>
///         <li><a href="#">Link 2</a></li>
///         <li><a href="#">Link 3</a></li>
///       </ul>
///     </nav>
///   </div>
///
/// @example html for svg animation
///   <div class="k-Dropdown">
///     <button class="k-Dropdown__button
///                    k-Dropdown__button--rotationOnExpanded">
///       <svg viewBox="0 0 10 7"
///            xmlns="http://www.w3.org/2000/svg">
///         <path className="k-Dropdown__button__svgPath"
///               d="M5 6.243L.757 2 2.172.586l4.242 4.242z"/>
///         <path className="k-Dropdown__button__svgPath
///                          k-Dropdown__button__svgPathRight"
///               d="M5 6.243L3.586 4.828 7.828.586 9.243 2z"/>
///       </svg>
///     </button>
///     …
///   </div>

@mixin k-Dropdown {

  .k-Dropdown {
    display: flex;
  }

  .k-Dropdown--asReference {
    position: relative;
  }

  .k-Dropdown__button--rotationOnExpanded {
    .k-Dropdown__button__svgPath {
      transition: transform .2s ease-out;
      transform-origin: 3.5px 50%;

      &.k-Dropdown__button__svgPathRight {
        transform-origin: 6.5px 50%;
      }

      .k-Dropdown.is-expanded & {
        transform: rotate(-90deg);

        &.k-Dropdown__button__svgPathRight {
          transform: rotate(90deg);
        }
      }
    }
  }

  .k-Dropdown__content {
    position: absolute;
    top: 0;
    z-index: 20;
    min-width: k-px-to-rem(200px);
    margin-top: -10px;

    @include k-media-xs {
      min-width: 0;
      width: 100%;
    }

    visibility: hidden;
    opacity: 0;
    transition: margin .2s, visibility .2s, opacity .2s;

    .k-Dropdown.is-expanded & {
      margin-top: 0;
      visibility: visible;
      opacity: 1;
    }
  }

  .k-Dropdown__content--large {
    min-width: k-px-to-rem(250px);
  }
}