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

.cptx-email-container{
  align-items: center;
  border: solid 1px transparent;
  border-radius: 4px;
  display: flex;
  margin-bottom: 6px;
  position: relative;
  width: calc(100% - 2px);

  &.email-container-collapse{
    &.email-unsend{
      .email-preview-content{
        color: #eeb6b7;
        font-style: italic;
      }
    }
  
    .email-info{
      margin: 5px 16px;
      width: calc(100% - 32px);
    }
  
    .email-preview-content{
      background-color: transparent;
      flex-grow: 1;
      font-size: 14px;
      font-weight: 100;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  
    >hr, .email-body{
      display: none;
    }
  }

  &.email-container-expand{
    height: auto;
    flex-direction: column;
  
    &.email-unsend {
      .email-text {
        font-style: italic;
      }
    }

    &.email-empty {
      .email-body > .email-text {
        font-style: italic;
        color: gray;
      }
    }

    &.lights-on {
      .email-body {
        color: inherit; 
        padding: 5px 17px 0px 17px;
        margin: 0px;
        background-color: white;
      }
    }
  
    > div{
      background-color: transparent;
      margin: 5px 17px 0px 17px;
      width: calc(100% - 32px);
    }

    .email-banner {
      margin: 20px 0px 5px 0px;
      width: calc(100% - 136px);
      text-align: center;
      padding: 5px;
      font-size: 14px;
      max-width: 600px;

      button {
        display: inline-block;
        font-size: 14px;
        background: transparent;
        margin: 0px;
        padding: 0px;
      }

      a, button {
        color: #0091ff;
        cursor: pointer;
      }

      &.not-encrypted {
        background: #f3f6ff;
      }

      &.resend {
        background: #fff5de;
      }
    }
  
    .email-info{
      .email-info-content{
        .email-info-content-to{
          align-items: center;
          background-color: transparent;
          display: flex;
          flex-direction: row;
          position: relative;
          width: calc(100% - 69px);
  
          >span{
            background-color: transparent;
            font-family: NunitoSans;
            font-size: 14px;
            font-weight: 100;
            line-height: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
  
          .email-info-content-to-more{
            background-color: transparent;
            display: flex;
            margin-left: 5px;
            position: relative;
            
            >span{
              background-color: transparent;
              color: #0091ff;
              cursor: pointer;
              font-family: NunitoSans;
              font-size: 14px;
              font-weight: 200;
            }
          }
        }
  
        .email-info-content-actions{
          background-color: transparent;
          margin-right: 10px;
          
          >div{
            align-items: center;
            background-color: transparent;
            display: flex;
            position: relative;
  
            i{
              background-color: transparent;
            }

            >i{
              cursor: pointer;
              font-size: 21px;
              margin: 0 5px;
              position: relative;
    
              &:last-child{
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  
    .email-body{
      .email-text{
        background-color: transparent;
        font-size: medium;
        font-weight: 200;
        overflow-x: auto;
        overflow-y: hidden;
      
        &[disabled]{
          opacity: 0.3;
          pointer-events: none;
        }
  
        >div{
          background-color: transparent;
          margin: 10px 0;
        }
  
        p{
          font-family: NunitoSans, Roboto;
        }
  
        .cptx-div-collapse{
          align-items: center;
          border: 1px solid transparent;
          border-radius: 13px;
          cursor: pointer;
          display: flex;
          height: 13px;
          justify-content: center;
          margin-bottom: 5px;
          margin-top: 10px;
          width: 35px;
  
          i{
            background-color: transparent;
            font-size: 23px;
          }
        }
  
        blockquote {
          margin-left: 10px;
          margin-top: 10px;
          padding-left: 10px;
          border-left: 1px solid #0091ff;
        }

        .criptext_quote{
          background-color: transparent;
        }
      }
  
      .email-files{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 20px;
        margin-top: 30px;
      
        &[disabled]{
          opacity: 0.2;
          pointer-events: none;
        }
      }
    }
  }

  &.email-unsend {
    border: solid 1px transparent;
  }

  > hr{
    background-color: transparent;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0;
    width: calc(100% - 20px);
  }

  .email-info{
    align-items: center;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .email-info-letter{
      align-items: center;
      background-color: blueviolet;
      border-radius: 50%;
      display: flex;
      height: 36px;
      margin-right: 10px;
      width: 36px;
    
      span{
        background-color: transparent;
        color: white;
        font-size: 15px;
        font-weight: 200;
        margin: 0 auto;
      }
    }

    .email-info-content{
      background-color: transparent;
      display: flex;
      flex-direction: column;
      position: relative;
      margin-top: 6px;
      width: calc(100% - 46px);

      .email-info-content-line{
        background-color: transparent;
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        &:last-child{
          height: 35px;
        }

        .email-info-content-from{
          background-color: transparent;
          line-height: initial;

          span{
            background-color: transparent;
            font-family: NunitoSans;
            font-size: 15px;
            font-weight: 600;
          }
        }

        .email-info-content-detail{
          align-items: center;
          background-color: transparent;
          display: flex;
          margin-right: 13px;

          .email-info-content-detail-date{
            background-color: transparent;
            color: black;
            font-family: NunitoSans;
            font-size: 13px;
            font-weight: 300;
            margin-left: 5px;
            text-align: right;
          }
        }
      }
    }

    .email-info-blocked{
      background-color: transparent;
      margin-bottom: 15px;
      font-family: NunitoSans;
      font-size: 14px;
      font-weight: 100;
      line-height: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #4a4a4a;
      margin-left: 46px;
      display: flex;
      align-items:center;

      .image-blocked {
        height: 15px;
        width: 15px;
        margin-right: 5px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-image: url(../#{$_PATH_TO_IMAGES}/image_blocked.svg);
      }

      svg {
       height: 15px;
       width: 15px;
       margin-right: 5px;
      }

      button {
        background-color: transparent;
        color: #0091ff;
        cursor: pointer;
        font-family: NunitoSans;
        font-size: 14px;
        font-weight: 200;
      }
    }
  }

  .email-status{
    background-color: transparent;
    width: auto;

    i{
      background-color: transparent;
      font-size: 13px;
      margin-right: 5px;

      &.status-sent, &.status-delivered, &.status-sending{
        color: #d5d5d5;
      }

      &.status-opened{
        color: #0091ff;
      }
    }

    .fake-icon-warning {
      background-image: url(../#{$_PATH_TO_IMAGES}/resend-warning.svg);
      background-repeat: no-repeat;
      background-size: contain;
      width: 15px;
      height: 18px;
      margin-right: 3px;
    }
  }

  .email-info-content-detail-icons{
    align-items: center;
    background-color: transparent;
    display: flex;
    
    i{
      background-color: transparent;
      color: #d5d5d5;

      &.icon-attach{
        font-size: 19px;
        transform: rotate(-90deg);
      }

      &.icon-secure{
        font-size: 14px;
      }

      &:nth-child(2){
        margin-left: 5px;
      }
    }

    > div{
      background-color: transparent;
    }
  }
}

.email-segment-controls{
  border: 1px solid transparent;
  border-radius: 17px;
  display: flex;
  height: 28px;
  margin: 12px auto;
  width: 266px;

  > div{
    align-items: center;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    flex-grow: 1;
    height: 100%;
    justify-content: center;

    &:nth-child(1){
      border-top-left-radius: 17px;
      border-bottom-left-radius: 17px;
      padding-left: 4px;
    }

    &:nth-child(3){
      border-top-right-radius: 17px;
      border-bottom-right-radius: 17px;
      padding-right: 4px;
    }

    &:nth-child(2){
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
    }

    i{
      background-color: transparent;
      color: rgba(60, 72, 88, 0.6);
      font-size: 19px;
      margin-right: 5px;
    }

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

    &:hover{
      background-color: #0091ff;
    }
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_EMAIL, $_BORDER_COLOR_EMAIL, $_BORDER_COLOR_EMAIL_UNSEND, $_COLOR_TEXT_EMAIL_SUBJECT, $_COLOR_TEXT_EMAIL_PREVIEW, $_COLOR_TEXT_EMAIL_CONTENT, $_COLOR_ICON_EMAIL_BUTTON_OPTION, $_COLOR_TEXT_EMAIL_CONTENT_LINK, $_BACKGROUND_COLOR_EMAIL_BUTTON_SEGMENT, $_BORDER_COLOR_EMAIL_BUTTON_SEGMENT, $_COLOR_TEXT_EMAIL_BUTTON_SEGMENT, $_COLOR_ICON_EMAIL_BUTTON_SEGMENT, $_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED, $_BORDER_COLOR_EMAIL_DOTS_COLLAPSED, $_COLOR_ICON_EMAIL_DOTS_COLLAPSED, $_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_HOVER, $_BORDER_COLOR_EMAIL_DOTS_COLLAPSED_HOVER, $_COLOR_ICON_EMAIL_DOTS_COLLAPSED_HOVER, $_BACKGROUND_COLOR_EMAIL_DOTS_EXPANDED, $_BORDER_COLOR_EMAIL_DOTS_EXPANDED, $_COLOR_ICON_EMAIL_DOTS_EXPANDED, $_BACKGROUND_COLOR_EMAIL_DOTS_EXPANDED_HOVER, $_BORDER_COLOR_EMAIL_DOTS_EXPANDED_HOVER, $_COLOR_ICON_EMAIL_DOTS_EXPANDED_HOVER){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .cptx-email-container{
      background-color: $_BACKGROUND_COLOR_EMAIL;
      border-color: $_BORDER_COLOR_EMAIL;

      &.email-container-collapse{
        .email-preview-content{
          color: $_COLOR_TEXT_EMAIL_PREVIEW;
        }
      }

      &.email-container-expand{
        .email-info{
          .email-info-content{
            .email-info-content-to{
              >span{
                color: $_COLOR_TEXT_EMAIL_PREVIEW;
              }
            }

            .email-info-content-actions{
              >div{
                >i{
                  color: $_COLOR_ICON_EMAIL_BUTTON_OPTION;
                }
              }
            }
          }
        }
      }

      &.email-unsend {
        border-color: $_BORDER_COLOR_EMAIL_UNSEND;
      }

      &.email-draft {
        .email-info .email-info-content .email-info-content-line .email-info-content-from span{
          color: #dd4040;
        }
      }

      .email-info{
        .email-info-content{
          .email-info-content-line{
            .email-info-content-from{
              span{
                color: $_COLOR_TEXT_EMAIL_SUBJECT;
              }
            }

            .email-info-content-detail{      
              .email-info-content-detail-date{
                color: $_COLOR_TEXT_EMAIL_PREVIEW;
              }
            }
          }
        }

        .email-info-blocked {
          color: #798091;
        }
      }

      .email-body{
        color: $_COLOR_TEXT_EMAIL_CONTENT;

        .email-text{
          .cptx-div-collapse{
            &.cptx-div-collapsed{
              background-color: $_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED;
              border-color: $_BORDER_COLOR_EMAIL_DOTS_COLLAPSED;
      
              i{
                color: $_COLOR_ICON_EMAIL_DOTS_COLLAPSED;
              }
              &:hover{
                background-color: $_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_HOVER;
                border-color: $_BORDER_COLOR_EMAIL_DOTS_COLLAPSED_HOVER;
        
                i{
                  color: $_COLOR_ICON_EMAIL_DOTS_COLLAPSED_HOVER;
                }
              }
            }

            &.cptx-div-expanded{
              background-color: $_BACKGROUND_COLOR_EMAIL_DOTS_EXPANDED;
              border-color: $_BORDER_COLOR_EMAIL_DOTS_EXPANDED;
      
              i{
                color: $_COLOR_ICON_EMAIL_DOTS_EXPANDED;
              }
              &:hover{
                background-color: $_BACKGROUND_COLOR_EMAIL_DOTS_EXPANDED_HOVER;
                border-color: $_BORDER_COLOR_EMAIL_DOTS_EXPANDED_HOVER;
        
                i{
                  color: $_COLOR_ICON_EMAIL_DOTS_EXPANDED_HOVER;
                }
              }
            }
          }
        }
        
        a{
          color: $_COLOR_TEXT_EMAIL_CONTENT_LINK;
        }
      }
    }

    .email-segment-controls{
      background-color: $_BACKGROUND_COLOR_EMAIL_BUTTON_SEGMENT;
      border-color: $_BORDER_COLOR_EMAIL_BUTTON_SEGMENT;
    
      > div{      
        &:nth-child(2){
          border-left-color: $_BORDER_COLOR_EMAIL_BUTTON_SEGMENT;
          border-right-color: $_BORDER_COLOR_EMAIL_BUTTON_SEGMENT;
        }
    
        i{
          color: $_COLOR_ICON_EMAIL_BUTTON_SEGMENT;
        }
    
        span{
          color: $_COLOR_TEXT_EMAIL_BUTTON_SEGMENT;
        }

        &:hover{
          i, span{
            color: white;
          }
        }
      }
    }
  }
}
    
@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_EMAIL_LIGHT, $_BORDER_COLOR_EMAIL_LIGHT, $_BORDER_COLOR_EMAIL_UNSEND_LIGHT, $_COLOR_TEXT_EMAIL_SUBJECT_LIGHT, $_COLOR_TEXT_EMAIL_PREVIEW_LIGHT, $_COLOR_TEXT_EMAIL_CONTENT_LIGHT, $_COLOR_ICON_EMAIL_BUTTON_OPTION_LIGHT, $_COLOR_TEXT_EMAIL_CONTENT_LINK_LIGHT, $_BACKGROUND_COLOR_EMAIL_BUTTON_SEGMENT_LIGHT, $_BORDER_COLOR_EMAIL_BUTTON_SEGMENT_LIGHT, $_COLOR_TEXT_EMAIL_BUTTON_SEGMENT_LIGHT, $_COLOR_ICON_EMAIL_BUTTON_SEGMENT_LIGHT, $_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_LIGHT, $_BORDER_COLOR_EMAIL_DOTS_COLLAPSED_LIGHT, $_COLOR_ICON_EMAIL_DOTS_COLLAPSED_LIGHT, $_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_HOVER_LIGHT, $_BORDER_COLOR_EMAIL_DOTS_COLLAPSED_HOVER_LIGHT, $_COLOR_ICON_EMAIL_DOTS_COLLAPSED_HOVER_LIGHT, $_BACKGROUND_COLOR_EMAIL_DOTS_EXPANDED_LIGHT, $_BORDER_COLOR_EMAIL_DOTS_EXPANDED_LIGHT, $_COLOR_ICON_EMAIL_DOTS_EXPANDED_LIGHT, $_BACKGROUND_COLOR_EMAIL_DOTS_EXPANDED_HOVER_LIGHT, $_BORDER_COLOR_EMAIL_DOTS_EXPANDED_HOVER_LIGHT, $_COLOR_ICON_EMAIL_DOTS_EXPANDED_HOVER_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_EMAIL_DARK, $_BORDER_COLOR_EMAIL_DARK, $_BORDER_COLOR_EMAIL_UNSEND_DARK, $_COLOR_TEXT_EMAIL_SUBJECT_DARK, $_COLOR_TEXT_EMAIL_PREVIEW_DARK, $_COLOR_TEXT_EMAIL_CONTENT_DARK, $_COLOR_ICON_EMAIL_BUTTON_OPTION_DARK, $_COLOR_TEXT_EMAIL_CONTENT_LINK_DARK, $_BACKGROUND_COLOR_EMAIL_BUTTON_SEGMENT_DARK, $_BORDER_COLOR_EMAIL_BUTTON_SEGMENT_DARK, $_COLOR_TEXT_EMAIL_BUTTON_SEGMENT_DARK, $_COLOR_ICON_EMAIL_BUTTON_SEGMENT_DARK, $_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_DARK, $_BORDER_COLOR_EMAIL_DOTS_COLLAPSED_DARK, $_COLOR_ICON_EMAIL_DOTS_COLLAPSED_DARK, $_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_HOVER_DARK, $_BORDER_COLOR_EMAIL_DOTS_COLLAPSED_HOVER_DARK, $_COLOR_ICON_EMAIL_DOTS_COLLAPSED_HOVER_DARK, $_BACKGROUND_COLOR_EMAIL_DOTS_EXPANDED_DARK, $_BORDER_COLOR_EMAIL_DOTS_EXPANDED_DARK, $_COLOR_ICON_EMAIL_DOTS_EXPANDED_DARK, $_BACKGROUND_COLOR_EMAIL_DOTS_EXPANDED_HOVER_DARK, $_BORDER_COLOR_EMAIL_DOTS_EXPANDED_HOVER_DARK, $_COLOR_ICON_EMAIL_DOTS_EXPANDED_HOVER_DARK);