@mixin common-dropdown() {
  background: $WHITE_BACKGROUND_COLOR;
  border-radius: $DEFAULT_BORDER_RADIUS;
  position: relative;
  outline: none;
  padding: 10px;
  border:1px solid $PRIMARY_BORDER_COLOR;

  &:after, &:before {
    bottom: 100%;
    left: 50px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  &:after {
    border-color:  transparent;
    border-bottom-color: $WHITE_BACKGROUND_COLOR;
    border-width: 8px;
    margin-left: -8px;
  }
  &:before {
    border-color:  transparent;
    border-bottom-color: $PRIMARY_BORDER_COLOR;
    border-width: 9px;
    margin-left: -9px;
  }
}

.dropdown {
  @include common-dropdown();
}

.floating-dropdown {
  @include common-dropdown();
  @include box-shadow(5px 5px 3px 1px $DIALOG_SHADOW_COLOR);
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1000;
}

.action-menu {
  float: right;
  position:relative;

  span {
    padding: 0px 5px;
  }
  ul {
    @include common-dropdown();
    @include box-shadow(3px 3px 3px 1px $DIALOG_SHADOW_COLOR);

    top: 10px;
    left: auto;
    right: -10px;
    list-style: None;
    position: absolute;
    z-index: 1000;
    min-width: 80px;
    padding: 5px 10px;
    white-space: nowrap;

    &:after, &:before {
      left: auto;
      right: 12px;
    }
    &:before {
      margin-right: -1px;
    }
    li {
      padding: 5px 0px;
    }
  }
}