// Table of Contents
// ==================================================
// Dropmenu
// Dropup

// scss-lint:disable NestingDepth
// scss-lint:disable SelectorDepth

// Dropmenu
// ==================================================
.dropmenu {
  @include transition(all 0.09s ease-in-out);
  background: color(black);
  border: 1px solid color(dark-black);
  border-radius: border-radius(b);
  color: color(gray);
  display: none;
  float: left;
  font-size: text-size(b);
  line-height: 1;
  list-style: none;
  margin: 2px 0 0;
  min-width: 200px;
  padding: 0;
  position: absolute;
  top: 100%;
  z-index: 1040;

  &.pull-center {
    left: calc(-25% - 20px);
    right: calc(-25% - 20px);
  }
  &.pull-right {
    left: auto;
    right: 0;
  }
  &.caret {
    top: calc(100% + 5px);

    &::before,
    &::after {
      content: '';
      display: inline-block;
      position: absolute;
    }
    &::before {
      border-bottom: 7px solid;
      border-bottom-color: inherit;
      border-left: 7px solid color(transparent);
      border-right: 7px solid color(transparent);
      left: 9px;
      top: -7px;
    }
    &::after {
      border-bottom: 6px solid;
      border-bottom-color: color(black);
      border-left: 6px solid color(transparent);
      border-right: 6px solid color(transparent);
      left: 10px;
      top: -6px;
    }

    &.pull-center {
      &::before { left: calc(50% - 4px); }
      &::after { left: calc(50% - 3px); }
    }
    &.pull-right {
      &::before,
      &::after { left: auto; }
      &::before { right: 9px; }
      &::after { right: 10px; }
    }
    &.light {
      &::after { border-bottom-color: color(light-haze); }
    }
    &.white {
      &::after { border-bottom-color: color(white); }
    }
  }

  li {
    > a {
      clear: both;
      display: block;
      padding: 10px 20px;

      i:first-child {
        display: inline-block;
        min-width: 14px;
        text-align: center;
      }
    }

    &:first-child {
      > a { padding-top: 20px; }
    }
    &:last-child {
      > a { padding-bottom: 20px; }
    }

    &.divider {
      border-top: 1px solid;
      border-top-color: inherit;
      margin: 10px 0 8px;
      overflow: hidden;
    }
  }
}
.open > .dropmenu {
  @include animation-duration(0.5s);
  @include animation-fill-mode(both);
  @include animation-name(animation-bounce-in);
  display: block;
}

// Dropup
// ==================================================
.dropup {
  .dropmenu {
    bottom: 100%;
    margin: 0 0 2px;
    top: auto;

    &.caret {
      bottom: calc(100% + 5px);
      top: auto;

      &::before,
      &::after {
        border-bottom: 0;
        top: auto;
      }
      &::before {
        border-top: 7px solid;
        border-top-color: inherit;
        bottom: -7px;
        left: 9px;
      }
      &::after {
        border-top: 6px solid color(black);
        bottom: -6px;
        left: 10px;
      }

      &.pull-center {
        &::before { left: calc(50% - 4px); }
        &::after { left: calc(50% - 3px); }
      }
      &.pull-right {
        &::before,
        &::after { left: auto; }
        &::before { right: 9px; }
        &::after { right: 10px; }
      }
      &.light {
        &::after { border-top-color: color(light-haze); }
      }
      &.white {
        &::after { border-top-color: color(white); }
      }
    }
  }
}