//
// Dropdown
//
.dropdown {
  //dropdown-menu
  &-menu {
    font-size: .875rem;
    color: rgba(0, 0, 0, .87);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .1);
    @include generate-browser-prefix(transform-origin, top left);

    & > li:not(.dropdown-item) > a {
      display: block;
      padding: 3px 20px;
      &:focus, &:hover {
        background-color: rgba(0, 0, 0, .065);
      }
    }

    & > .divider {
      height: 1px;
      margin: .5rem 0;
      overflow: hidden;
      background-color: rgba(120, 130, 140, .13);
    }

    &.pull-left {
      left: auto !important;
      right: 100%
    }

    &.pull-right {
      left: auto;
      right: 0;
      @include generate-browser-prefix(transform-origin, top right);

      .dropup & {
        @include generate-browser-prefix(transform-origin, bottom right);
      }
    }

    &.pull-up {
      top: 0
    }

    &.pull-down {
      top: 100% !important;
      left: 0 !important
    }
    .active {
      background-color: rgba(0, 0, 0, .065);
    }

    .dropup & {
      @include generate-browser-prefix(transform-origin, bottom left);
    }

    &.datepicker, &.timepicker {
      padding: 6px;
      font-size: .8rem;

      .btn {
        font-size: .8rem;
        &.btn-primary {
          background-color: #2196f3;
          color: #fff;
        }
        &:not(:hover) {
          box-shadow: 0 0 1px transparent;
        }
      }
    }

    //dropdown-menu-scale
    &-scale {
      display: block;
      opacity: 0;
      @include generate-browser-prefix(transform, scale(.8));
      @include generate-browser-prefix(transition, all 250ms cubic-bezier(.24, .22, .015, 1.56));
      @include generate-browser-prefix(backface-visibility, hidden);
      pointer-events: none;

      .open & {
        opacity: 1;
        @include generate-browser-prefix(transform, scale(1));
        pointer-events: auto;
        display: block !important
      }
    }

    .dropdown-submenu & {
      left: 100%;
      top: 0;
      margin-top: -6px;
      margin-left: -1px;
      .dropup & {
        top: auto;
        bottom: 0;
        margin-bottom: -6px;
      }
    }

    @each $key,$val in $media-max-breakpoints {
      @include generate-media-max-breakpoint($key) {
        &.pull-none-lg {
          left: 0
        }
        &.pull-right-lg{
          left: auto;
          right: 0
        }
      }
    }

  }

  //dropdown-item
  &-item {
    i {
      width: 1.2rem;
      margin-left: -.5rem;
      margin-right: .5rem;
      opacity: .7;
      text-align: center;
    }
    &, &.active {
      color: inherit;
      &:focus, &:hover {
        color: inherit;
        background-color: rgba(0, 0, 0, .065);
      }
    }

  }

  //dropdown-divider
  &-divider {
    background-color: rgba(120, 130, 140, .13);
  }

  //dropdown-header
  &-header {
    padding: 8px 16px;
  }

  //dropdown-submenu
  &-submenu {
    position: relative;

    &:focus, &:hover {
      & > .dropdown-menu {
        display: block;
      }
    }
  }
}