@import "./../styles/index.scss";

.icon-dots .menu-container.menu-arrow.arrow-top-left{
  &:before, &:after{
    left: 176px;
  }
}

.email-more-menu{
  background-color: transparent;
  border-radius: 6px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.14);
  height: auto;
  padding: 10px 0;
  width: 204px;

  &:before{
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    right: 15px;
    top: -6px;
    border-bottom: 6px solid white;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
  }

  ul{
    list-style-type: none;
    margin: 0;
    padding: 0;

    li{
      align-items: center;
      background-color: transparent;
      cursor: pointer;
      display: flex;
      height: 30px;
      margin: 0;
      padding-left: 16px;

      span{
        font-family: NunitoSans;
        font-size: 13px;
        font-weight: 300;
      }
    }
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_COLOR_TEXT_CONTACT_TAG_NAME, $_COLOR_TEXT_CONTACT_TAG_EMAIL, $_BACKGROUND_COLOR_POPOVER_EMAIL_ACTION_ITEM_HOVER){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .email-more-menu{
      ul{
        li{
          &:hover{
            background-color: $_BACKGROUND_COLOR_POPOVER_EMAIL_ACTION_ITEM_HOVER;
          }
        }
      }
    }
  }
}
  
@include themable($_THEME_LIGHT, $_COLOR_TEXT_CONTACT_TAG_NAME_LIGHT, $_COLOR_TEXT_CONTACT_TAG_EMAIL_LIGHT, $_BACKGROUND_COLOR_POPOVER_EMAIL_ACTION_ITEM_HOVER_LIGHT);
@include themable($_THEME_DARK, $_COLOR_TEXT_CONTACT_TAG_NAME_DARK, $_COLOR_TEXT_CONTACT_TAG_EMAIL_DARK, $_BACKGROUND_COLOR_POPOVER_EMAIL_ACTION_ITEM_HOVER_DARK);