.dropdown {
  display: inline-flex;
  position: relative;
  z-index: 10000;

  .dropdown-content {
    position: absolute;
    bottom: 0;
    left: 0;
    background: transparent;
    padding-top: 20px;
    min-width: 160px;
    opacity: 0;
    display: none;
    -webkit-transform: translateY(90%);
    transform: translateY(90%);
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;

    .dropdown-menu {
      background-color: white;
      border-radius: 5px 18px 18px 18px;
      width: 100%;
      padding: 10px;
      -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
      box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      color: $darkestGray;
    }

    .dropdown-item {
      text-align: left;
      width: 100%;
      position: relative;
      padding: 5px 10px;
      cursor: pointer;
      margin: 0;
      border: 0;
      background: transparent;
      font-size: 0.85rem;
      opacity: 0.7;
      -webkit-transition: all 0.25s ease, color 0s;
      transition: all 0.25s ease, color 0s;
      font-weight: 700;

      &:hover {
        opacity: 1;
      }
    }

    .dropdown-title {
      text-align: left;
      margin: 0;
      width: 100%;
      padding: 5px 6px;
    }
  }

  &.open,
  &.hoverable:hover {
    .dropdown-content {
      opacity: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
  }

  .has-caret {
    &::after {
      content: "";
      width: 0px;
      height: 0px;
      border-top: 6px solid white;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: none;
      margin-left: 5px;
    }
  }

  &.right {
    .dropdown-content {
      left: auto;
      right: 0;

      .dropdown-menu {
        border-radius: 18px 5px 18px 18px;
      }
    }
  }

  &.to-up {
    .dropdown-content {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
      bottom: auto;
      top: 0;
      padding-top: 0;
      padding-bottom: 10px;

      .dropdown-menu {
        border-radius: 18px 18px 18px 5px;
      }
    }

    .has-caret {
      &::after {
        content: "";
        width: 0px;
        height: 0px;
        border-bottom: 6px solid white;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: none;
        margin-left: 5px;
      }
    }

    &.right {
      .dropdown-menu {
        border-radius: 18px 18px 5px 18px;
      }
    }
  }

  &.square {
    .dropdown-menu {
      border-radius: 0 !important;
    }
  }

  @each $color, $value in $colors {
    &.#{$color} {
      .dropdown-menu {
        background-color: $value;
        color: get-contrast($value);
      }

      &.flat {
        .dropdown-menu {
          background-color: tint($value, 85%);
          color: $value;
        }
      }
    }
  }
}