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

.thread-container{
  height: 100%;
  width: 100%;
  position: relative;

  .cptx-thread-content{
    height: calc(100% - 61px);

    .thread-info{
      background-color: transparent;
      display: flex;
      justify-content: space-between;
      margin: 0 25px;
      min-height: 72px;
      width: calc(100% - 50px);
    
      .thread-info-title{
        background-color: transparent;
        display: flex;
        margin: 26px 0 0 0;
        width: calc(100% - 50px);
        flex-wrap: wrap;
        
        h1{
          background-color: transparent;
          font-family: NunitoSans, Roboto;
          font-size: 21px;
          font-weight: 700;
          line-height: 24px;
          margin: 0 10px 10px 0;
          overflow: hidden;
        }
      }
    }
  }
}

.thread-starred-status{
  align-items: flex-start;
  background-color: transparent;
  display: flex;
  margin: 26px 0 0 0;

  &.starred-on{
    i{
      color: #ffc832;
    }
  }

  &.starred-off{
    i{
      color: #f6bc1f;
    }
  }

  i{
    background-color: transparent;
    cursor: pointer;
    font-size: 19px;
  }
}

.cptx-thread-emails{
  background-color: transparent;
  height: calc(100% - 72px);
  overflow: auto;
  padding: 0 25px;
  width: calc(100% - 50px);

  >div{
    background-color: transparent;
  }
}

.thread-collapsed {
  height: 0;
  position: relative;

  .thread-collapsed-clickable {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 36px;
    margin-top: -21px;
    cursor: pointer;

    .thread-collapsed-counter {
      height: 36px;
      width: 36px;
      margin-left: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid;
      border-radius: 30px;
    }
  }
}

.thread-navigation-control{
  align-items: flex-start;
  border: 1px solid transparent;
  border-radius: 17px;
  display: flex;
  height: 28px;
  margin: 22px 10px 0 0;
  width: 80px;

  > 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(2){
      border-top-right-radius: 17px;
      border-bottom-right-radius: 17px;
      border-left: 1px solid transparent;
      padding-right: 4px;
    }

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

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

    &:hover{
      background-color: #0091ff;
      i, span{
        color: white;
      }
    }
  }
}

.button-nav-disabled {
  &:hover{
    background-color: transparent !important;
    i {
      color: #8a919b !important;
    }
  }
}

.thread-previous-button {
  i {
    transform: scaleX(-1);
  }
}

.labels-tooltip{
  border-radius: 3px;
  font-family: NunitoSans;
  font-size: 12px;
  font-weight: normal;
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_MAIN, $_COLOR_TEXT_MAIN_TITLE, $_BACKGROUND_COLOR_THREAD_ITEM, $_COLOR_TEXT_THREAD_EMAIL_EXPAND, $_BORDER_COLOR_THREAD_EMAIL_EXPAND, $_BACKGROUND_COLOR_EMAIL_BUTTON_SEGMENT, $_BORDER_COLOR_EMAIL_BUTTON_SEGMENT, $_COLOR_ICON_EMAIL_BUTTON_SEGMENT, $_COLOR_TEXT_EMAIL_BUTTON_SEGMENT){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .cptx-thread-content{
      background-color: $_BACKGROUND_COLOR_MAIN;

      .thread-info{
        .thread-info-title{
          h1{
            color: $_COLOR_TEXT_MAIN_TITLE;
          }
        }
      }
    }

    .thread-collapsed {
      .thread-collapsed-clickable {
        .thread-collapsed-counter {
          background: $_BACKGROUND_COLOR_THREAD_ITEM;
          border-color: $_BORDER_COLOR_THREAD_EMAIL_EXPAND;
          color: $_COLOR_TEXT_THREAD_EMAIL_EXPAND;
        }
      }
    }

    .thread-navigation-control {
      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_MAIN_LIGHT, $_COLOR_TEXT_MAIN_TITLE_LIGHT, $_BACKGROUND_COLOR_THREAD_ITEM_UNREAD_LIGHT, $_COLOR_TEXT_THREAD_EMAIL_EXPAND_LIGHT, $_BORDER_COLOR_THREAD_EMAIL_EXPAND_LIGHT, $_BACKGROUND_COLOR_EMAIL_BUTTON_SEGMENT_LIGHT, $_BORDER_COLOR_EMAIL_BUTTON_SEGMENT_LIGHT, $_COLOR_ICON_EMAIL_BUTTON_SEGMENT_LIGHT, $_COLOR_TEXT_EMAIL_BUTTON_SEGMENT_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_MAIN_DARK, $_COLOR_TEXT_MAIN_TITLE_DARK, $_BACKGROUND_COLOR_THREAD_ITEM_UNREAD_DARK, $_COLOR_TEXT_THREAD_EMAIL_EXPAND_DARK, $_BORDER_COLOR_THREAD_EMAIL_EXPAND_DARK, $_BACKGROUND_COLOR_EMAIL_BUTTON_SEGMENT_DARK, $_BORDER_COLOR_EMAIL_BUTTON_SEGMENT_DARK, $_COLOR_ICON_EMAIL_BUTTON_SEGMENT_DARK, $_COLOR_TEXT_EMAIL_BUTTON_SEGMENT_DARK);