@import "icons.css";

.wrapper {
  position: relative;
  display: inline-block;
}

.menuBtn {
  @mixin icon-before ellipsis-v, $gray-darkest, 25px {
    margin: 5px;
  }
  width: 36px;
  height: 36px;
  border-radius: 18px;
  border: 1px solid transparent;
  transition: all 0.2s;
  margin: 0 auto;
  cursor: pointer;

  &:hover {
    border-color: $active-blue-border;
    transition: all 0.2s;
    background-color: #fff;
  }
}
.menu {
  &[data-displayed=false] {
    display: none;
  }

  z-index: 10;
  position: absolute;
  right: 31px;
  top: 18px;
  width: 150px;
  background-color: $white;
  border-radius: 3px;
  box-shadow: 0px 1px 3px 0 $gray-light;

  & .menuItem {
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid $gray-light;
    color: $gray-dark;

    & .iconWrapper {
      width: 13px;
      height: 13px  ;
      margin-right: 8px;
    }

    &:hover {
      background-color: $gray-lightest;
    }

    &:last-child {
      border: none;
    }

    & .edit {
      @mixin icon pencil, $gray-medium, 15px;
      margin-right: 10px;
    }

    & .copy {
      @mixin icon copy, $gray-medium, 15px;
      margin-right: 10px;
    }

    & .remove {
      @mixin icon trash, $gray-medium, 15px;
      margin-right: 10px;
    }

    & .enabled {
      @mixin icon eye, $gray-medium, 15px;
      margin-right: 10px;
    }

    & .disabled {
      @mixin icon eye-slash, $gray-medium, 15px;
      margin-right: 10px;
    }

  }
}