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

.email-info-content-to-more .menu-container.menu-arrow.arrow-top-left{
  &:before, &:after{
    left: 105px;
  }
}

.email-more-detail{
  background-color: transparent;
  height: auto;
  padding: 0 10px;
  width: 300px;

  table{
    margin: 10px auto;

    td{
      border: none;
      line-height: initial;
      padding: 2px 0;

      &:first-child{
        min-width: 69px;
        vertical-align: top;
      }

      span{
        font-family: NunitoSans;
        font-size: 12px;
      }

      .title{
        font-size: 12px;
        font-weight: 700;
        margin-right: 8px;
      }
  
      .text{
        font-size: 12px;
        font-weight: 300;
      }
    }
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_POPOVER, $_BORDER_COLOR_POPOVER, $_COLOR_TEXT_POPOVER){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .menu-container{
      background-color: $_BACKGROUND_COLOR_POPOVER;
      border-color: $_BORDER_COLOR_POPOVER;

      &.menu-arrow{
        &:before{
          border-color:$_BORDER_COLOR_POPOVER transparent;
        }
    
        &:after{
          border-color:$_BACKGROUND_COLOR_POPOVER transparent;
        }
      }
    }

    .email-more-detail{
      table{
        td{
          .title{
            color: $_COLOR_TEXT_POPOVER;
          }
      
          .text{
            color: $_COLOR_TEXT_POPOVER;
          }
        }
      }
    }
  }
}
  
@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_POPOVER_LIGHT, $_BORDER_COLOR_POPOVER_LIGHT, $_COLOR_TEXT_POPOVER_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_POPOVER_DARK, $_BORDER_COLOR_POPOVER_DARK, $_COLOR_TEXT_POPOVER_DARK);