// ┌───────────┐
// │ Dropdowns │
// └───────────┘
//  ↳ http://esri.github.io/calcite-web/documentation/components/#dropdowns
//  ↳ components → _dropdowns.md

@mixin dropdown {
  position: relative;
  display: inline-block;
  &.is-active .dropdown-menu {
    display: block;
  }
}

  @mixin dropdown-link() {
    position: relative;
    display: block;
    @include box-sizing(border-box);
    padding: $baseline/3;
    @include font-size(-2);
    color: $darker-gray;
    background-color: $white;
    border-bottom: none;
    @include text-left();
    border-left: none;
    border-right: none;
    border-top: 1px solid $lightest-gray;
    white-space: nowrap;
    cursor: pointer;
    width: 100%;
    &:hover {
      background-color: $off-white;
      text-decoration: none;
      color: $darker-gray;
    }
    &.is-active, &:focus {
      text-indent: -3px;
      @include border-left(3px solid $blue);
    }
  }

  @mixin dropdown-title() {
    @include dropdown-link();
    background-color: $off-white;
    cursor: auto;
  }

  @mixin dropdown-btn {
    // for developers who haven't moved to inline svg icons yet
    @if $include-svg-icon == false {
      padding-right: 1.5rem;
      cursor: pointer;
      position: relative;
      &:after {
        @include font-size(-2);
        @extend %icon-font-after;
        @extend .icon-ui-down:before;
        position: absolute;
        @include position-right(.35rem);
      }
      @if ($include-right-to-left) {
        html[dir="rtl"] &:after {
          padding-left: 0;
        }

        html[dir="rtl"] & {
          padding-left: 1.5rem;
          padding-right: 0.9rem;
        }
      }
    // for inline svg, the code is much easier
    } else {
      cursor: pointer;
      position: relative;
    }
  }


  @mixin dropdown-menu {
    position: absolute;
    min-width: 200px;
    @include box-shadow($box-shadow);
    @extend .side-nav;
    z-index: 1000;
    display: none;
    overflow: auto;
    &.dropdown-right {
      @include position-right(0);
    }
  }

@if $include-dropdowns == true {
  .dropdown { @include dropdown(); }
  .dropdown-btn { @include dropdown-btn(); }
  .dropdown-menu { @include dropdown-menu(); }
  .dropdown-title {@include dropdown-title();}
  .dropdown-link { @include dropdown-link();}
}
