// Name:            Dropdown menus
//
// Component:       `dropdown`
//
// Modifiers:       `dropdown-submenu`
//                  `dropdown-menu-primary`
//                  `dropdown-menu-success`
//                  `dropdown-menu-info`
//                  `dropdown-menu-warning`
//                  `dropdown-menu-danger`
//                  `dropdown-menu-dark`
//                  `dropdown-menu-media`
//
// Markup:
//
// <!-- dropdown -->
// <div class="dropdown-menu">
//   <li><a href="">...</a></li>
//   <li class="active"><a href="">...</a></li>
// </div>
//
// ========================================================================

// Variables
// ========================================================================

// $dropdown-header-item-padding: 8px 35px !default;
$dropdown-header-padding:            8px 13px 6px !default;
$dropdown-header-font-size:          $font-size-small !default;
$dropdown-header-font-weight:        $font-weight-bold !default;

$dropdown-divider-margin:            6px 0 !default;

// primary
$dropdown-primary-link-active-color: $inverse !default;
$dropdown-primary-link-active-bg:    $brand-primary !default;

// success
$dropdown-success-link-active-color: $inverse !default;
$dropdown-success-link-active-bg:    $brand-success !default;

// info
$dropdown-info-link-active-color:    $inverse !default;
$dropdown-info-link-active-bg:       $brand-info !default;

// warning
$dropdown-warning-link-active-color: $inverse !default;
$dropdown-warning-link-active-bg:    $brand-warning !default;

// danger
$dropdown-danger-link-active-color:  $inverse !default;
$dropdown-danger-link-active-bg:     $brand-danger !default;

// dark
$dropdown-dark-link-active-color:    $inverse !default;
$dropdown-dark-link-active-bg:       $brand-dark !default;

$dropdownm-menu-animation-name:      slide-left !default;
$dropdownm-menu-animation-duration:  .5s !default;
$dropdownm-menu-animation-delay:     0.02s !default;


// Component: Dropdown menus
// ========================================================================

.dropdown-toggle {
  &:after {
    margin-right: 0;
    margin-left: .3em;
  }

  &.btn-xs {
    &:after {
      margin-left: 0;
    }
  }
}

// Dropdown menu
// ========================================================================

.dropdown-item {
  width: calc(100% - 10px);
  margin: 2px 5px;
  padding: $dropdown-link-padding;
  border-radius: $dropdown-link-border-radius;
  transition: background-color .25s;

  .icon:first-child {
    margin-right: .5em;

    @include icon-fixed-width();
  }
}

.dropdown-divider {
  margin: $dropdown-divider-margin;
}

.dropdown-menu {
  transition: .25s;
  box-shadow: $dropdown-menu-shadow;

  &.dropdown-menu-bullet {
    margin-top: 12px;

    &:before,
    &:after {
      position: absolute;
      left: 10px;
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      border: 7px solid transparent;
      border-top-width: 0;
    }

    &:before {
      top: -7px;
      border-bottom-color: $dropdown-border-color;
    }

    &:after {
      top: -6px;
      border-bottom-color: $dropdown-bg;
    }
  }

  &-right.dropdown-menu-bullet {
    &:before,
    &:after {
      right: 10px;
      left: auto;
    }
  }

  &.animate {
    overflow: hidden;

    // @include animation-name($dropdownm-menu-animation-name);
    // @include animation-duration($dropdownm-menu-animation-duration);
    // @include animation-fill-mode(both);

    > .dropdown-item {
      animation: $dropdownm-menu-animation-name $dropdownm-menu-animation-duration both;

      &:nth-child(1) {
        animation: animation-delay(($dropdownm-menu-animation-delay*1));
      }
      &:nth-child(2) {
        animation: animation-delay(($dropdownm-menu-animation-delay*2));
      }
      &:nth-child(3) {
        animation: animation-delay(($dropdownm-menu-animation-delay*3));
      }
      &:nth-child(4) {
        animation: animation-delay(($dropdownm-menu-animation-delay*4));
      }
      &:nth-child(5) {
        animation: animation-delay(($dropdownm-menu-animation-delay*5));
      }
      &:nth-child(6) {
        animation: animation-delay(($dropdownm-menu-animation-delay*6));
      }
      &:nth-child(7) {
        animation: animation-delay(($dropdownm-menu-animation-delay*7));
      }
      &:nth-child(8) {
        animation: animation-delay(($dropdownm-menu-animation-delay*8));
      }
      &:nth-child(9) {
        animation: animation-delay(($dropdownm-menu-animation-delay*9));
      }
      &:nth-child(10) {
        animation: animation-delay(($dropdownm-menu-animation-delay*10));
      }
      &.dropdown-divider {
        -webkit-animation-name: none;
                animation-name: none;
      }
    }
    &.animate-reverse {
      > .dropdown-item {
        &:nth-last-child(1) {
          animation: animation-delay(($dropdownm-menu-animation-delay*1));
        }
        &:nth-last-child(2) {
          animation: animation-delay(($dropdownm-menu-animation-delay*2));
        }
        &:nth-last-child(3) {
          animation: animation-delay(($dropdownm-menu-animation-delay*3));
        }
        &:nth-last-child(4) {
          animation: animation-delay(($dropdownm-menu-animation-delay*4));
        }
        &:nth-last-child(5) {
          animation: animation-delay(($dropdownm-menu-animation-delay*5));
        }
        &:nth-last-child(6) {
          animation: animation-delay(($dropdownm-menu-animation-delay*6));
        }
        &:nth-last-child(7) {
          animation: animation-delay(($dropdownm-menu-animation-delay*7));
        }
        &:nth-last-child(8) {
          animation: animation-delay(($dropdownm-menu-animation-delay*8));
        }
        &:nth-last-child(9) {
          animation: animation-delay(($dropdownm-menu-animation-delay*9));
        }
        &:nth-last-child(10) {
          animation: animation-delay(($dropdownm-menu-animation-delay*10));
        }
      }
    }
  }
}

.dropup,
.navbar-fixed-bottom .dropdown {
  // Different positioning for bottom up menu
  .dropdown-menu {
    margin-bottom: 6px;
    box-shadow: $dropup-menu-shadow;

    &.dropdown-menu-bullet {
      margin-bottom: 12px;

      &:before,
      &:after {
        top: auto;
        border-top-width: 7px;
        border-bottom-width: 0;
      }

      &:before {
        bottom: -7px;
        border-top-color: $dropdown-border-color;
      }

      &:after {
        bottom: -6px;
        border-top-color: $dropdown-bg;
      }
    }
  }
}

// Modifier: `dropdown-header-menu`
// -------------------------

// .dropdown-menu.dropdown-header-menu {
//   > li {
//     > a {
//       padding: $dropdown-header-item-padding;
//     }
//   }
// }

.dropdown-menu > .dropdown-header {
  padding: $dropdown-header-padding;
  font-size: $dropdown-header-font-size;
  font-weight: $dropdown-header-font-weight;
  text-transform: uppercase;
  cursor: default;
}

// Modifier: `dropdown-submenu`
// -------------------------

.dropdown-menu > .dropdown-submenu {
  position: relative;
  > .dropdown-item {
    position: relative;
    &:after {
      position: absolute;
      right: 10px;
      display: inline-block;
      width: 0;
      height: 0;
      margin-top: 6px;
      vertical-align: middle;
      content: '';
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-left: 4px dashed;
    }
  }
  .dropdown-menu {
    left: 100%;
    margin: 0;
  }
  &.dropdown-menu-left .dropdown-menu {
    left: -100%;
  }
  &:hover {
    .dropdown-menu {
      display: block;
    }
  }
}


.dropdown .dropdown-submenu {
  .dropdown-menu {
    top: 0;
  }
}

.dropup .dropdown-submenu {
  .dropdown-menu {
    bottom: 0;
  }
}

// Dropdown Menu With Media
// ========================================================================
$dropdown-menu-media-width:                              360px !default;
$dropdown-menu-media-list-group-height:                  270px !default;
$dropdown-menu-media-border:                             $dropdown-border !default;
$dropdown-menu-media-padding-horizontal:                 20px !default;

$dropdown-menu-media-font-size:                          $font-size-sm !default;

$dropdown-menu-media-header-bg:                          $inverse !default;
$dropdown-menu-media-header-padding:                     20px $dropdown-menu-media-padding-horizontal !default;
$dropdown-menu-media-footer-padding:                     15px $dropdown-menu-media-padding-horizontal !default;

$dropdown-menu-media-footer-color:                       $gray !default;
$dropdown-menu-media-footer-bg:                          $gray-lightest !default;
$dropdown-menu-media-footer-hover-color:                 $link-hover-color !default;
$dropdown-menu-media-footer-btn-hover-color:             $link-hover-color !default;


.dropdown-menu-media {
  padding-top: 0;
  padding-bottom: 0;
  width: $dropdown-menu-media-width;

  > li {
    padding: 0;
    margin: 0;
  }

  .dropdown-menu-header {
    padding: $dropdown-menu-media-header-padding;
    background-color: $dropdown-menu-media-header-bg;
    border-bottom: 1px solid $dropdown-menu-media-border;

    > h3, > h4, > h5 {
      margin: 0;
    }
    position: relative;

    .tag {
      position: absolute;
      right: $dropdown-menu-media-padding-horizontal;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .list-group {
    font-size: $dropdown-menu-media-font-size;
    margin: 0;
    border-radius: 0;
    max-height: $dropdown-menu-media-list-group-height;
  }

  .list-group-item {
    margin: 0;
    padding: 0 $dropdown-menu-media-padding-horizontal;
    border-radius: 0 !important;
    border: none;

    .media {
      padding: 15px 0;
      border-top: 1px solid $dropdown-menu-media-border;
    }

    &:first-child {
      .media {
        border-top: none;
      }
    }
  }

  > .dropdown-menu-footer {
    border-top: 1px solid $dropdown-menu-media-border;
    background-color: $dropdown-menu-media-footer-bg;

    > a {
      margin: 0;
      padding: $dropdown-menu-media-footer-padding !important;
      color: $dropdown-menu-media-footer-color !important;

      &:hover {
        background-color: transparent !important;
        color: $dropdown-menu-media-footer-hover-color !important;
      }
    }

    > .dropdown-menu-footer-btn {
      position: absolute;
      right: 0;

      &:hover {
        color: $dropdown-menu-media-footer-btn-hover-color !important;
        background-color: transparent !important;
      }
    }
  }
}


// Color Modifier
// ========================================================================

// Modifier: `dropdown-menu-primary`
// -------------------------

.dropdown-menu-primary {
  @include dropdown-states-variant(".dropdown-menu-primary", $dropdown-primary-link-active-color, $dropdown-primary-link-active-bg);
}

// Modifier: `dropdown-menu-success`
// -------------------------

.dropdown-menu-success {
  @include dropdown-states-variant(".dropdown-menu-success", $dropdown-success-link-active-color, $dropdown-success-link-active-bg);
}

// Modifier: `dropdown-menu-info`
// -------------------------

.dropdown-menu-info {
  @include dropdown-states-variant(".dropdown-menu-info", $dropdown-info-link-active-color, $dropdown-info-link-active-bg);
}

// Modifier: `dropdown-menu-warning`
// -------------------------

.dropdown-menu-warning {
  @include dropdown-states-variant(".dropdown-menu-warning", $dropdown-warning-link-active-color, $dropdown-warning-link-active-bg);
}

// Modifier: `dropdown-menu-danger`
// -------------------------

.dropdown-menu-danger {
  @include dropdown-states-variant(".dropdown-menu-danger", $dropdown-danger-link-active-color, $dropdown-danger-link-active-bg);
}

// Modifier: `dropdown-menu-dark`
// -------------------------

.dropdown-menu-dark {
  @include dropdown-states-variant(".dropdown-menu-dark", $dropdown-dark-link-active-color, $dropdown-dark-link-active-bg);
}