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

$_HEADER_MAIN_PADDING_LEFT: 35px;
$_HEADER_MAIN_PADDING_RIGHT: 25px;

.header-threadoptions{
  align-items: center;
  background-color: transparent;
  display: flex;
  height: 100%;
  justify-content: space-between;
  padding: 0 $_HEADER_MAIN_PADDING_RIGHT 0 $_HEADER_MAIN_PADDING_LEFT;
  width: calc(100% - (#{$_HEADER_MAIN_PADDING_RIGHT} + #{$_HEADER_MAIN_PADDING_LEFT}));

  .header-action:nth-child(1){
    width: 189px;
  }

  .header-action:nth-child(2){
    margin-left: -130px;
  }
}

.button-string-container{
  .button-circle{
    float: left;
  }
  
  span{
    color: #8d9095;
    float: right;
    font-size: 12px;
    font-weight: 300;
    margin-left: 7px;
    margin-top: 7px;
  }
}

.menu-select-all{
  background-color: #0091ff !important;
  border-color: #0091ff !important;

  > i{
    color: white;
    opacity: 1 !important;
  }
}

.multiselect-list{
  max-height: 300px;
  overflow-y: scroll;
  list-style-type: none;
  padding: 0;
  margin: 0;

  li{
    align-items: center;
    display: flex;
    height: 30px;
    margin: 0;
    padding-left: 16px;
    
    &:hover{
      cursor: pointer;
    }

    > span{
      font-size: 13px;
      font-weight: 200;
    }

    .checkmark-container{
      &:hover{
        background-color: transparent;
      }
    }
  }

  &::-webkit-scrollbar { 
    display: none; 
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_POPOVER_EMAIL_ACTION_ITEM_HOVER, $_COLOR_TEXT_POPOVER){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .multiselect-list{
      li{
        &:hover{
          background-color: $_BACKGROUND_COLOR_POPOVER_EMAIL_ACTION_ITEM_HOVER;
        }

        > span{
          color: $_COLOR_TEXT_POPOVER;
        }
      }
    }
  }
}
  
@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_POPOVER_EMAIL_ACTION_ITEM_HOVER_LIGHT, $_COLOR_TEXT_POPOVER_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_POPOVER_EMAIL_ACTION_ITEM_HOVER_DARK, $_COLOR_TEXT_POPOVER_DARK);