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

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

  &.hidden{
    display: none;
  }

  .threads-header{
    align-items: center;
    display: flex;
    height: 40px;
    justify-content: space-between;
    margin: 0 10px;
    position: absolute;
    z-index: 2;
    width: calc(100% - 40px);
    padding: 0 10px;

    .threads-header-title-container{
      align-items: center;
      display: flex;
      margin-left: 20px;

      .threads-mailbox-title{
        margin: 6px 0 0 0;
        text-transform: uppercase;
      }
    }

    .threads-header-switch-container{
      display: flex;
      font-size: 11px;
      font-weight: 500;
      margin-top: 6px;
    
      >span{
        margin: 0 5px;
        text-transform: capitalize;

        &.disabled{
          opacity: 0.5;
        }
      }
    
      .input-switch{
        margin-right: 5px;
      }
    }
  }

  .threads-content{
    overflow-y: auto;
    height: calc(100% - 124px);
    padding: 44px 20px 20px 20px;
    position: relative;
    width: calc(100% - 40px);

    .threads-items{
      background-color: white;
      box-shadow: 0 2px 10px 0 rgba(0, 0, 1, 0.09);
      height: 100%;
    }
  }
}

.threads-loading {
  display: flex;
  margin: 0 auto;
  position: relative;
  width: 64px;
  height: 44px;

  div {
    position: absolute;
    top: 17px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dadada;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);

    &:nth-child(1) {
      left: 6px;
      animation: loading-dots1 0.6s infinite;
    }

    &:nth-child(2) {
      left: 6px;
      animation: loading-dots2 0.6s infinite;
    }

    &:nth-child(3) {
      left: 26px;
      animation: loading-dots2 0.6s infinite;
    }

    &:nth-child(4) {
      left: 45px;
      animation: loading-dots3 0.6s infinite;
    }
  }
}

@keyframes loading-dots1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes loading-dots3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes loading-dots2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_MAIN, $_COLOR_TEXT_MAIN_TITLE, $_COLOR_TEXT_MAIN_SWITCH_UNREAD, $_BACKGROUND_COLOR_THREAD_ITEM){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .threads-header{
      background-color: $_BACKGROUND_COLOR_MAIN;

      .threads-mailbox-title{
        color: $_COLOR_TEXT_MAIN_TITLE
      }

      .threads-header-switch-container{
        >span{
          color: $_COLOR_TEXT_MAIN_SWITCH_UNREAD;
        }
      }
    }

    .threads-content{
      background-color: $_BACKGROUND_COLOR_MAIN;

      .threads-items{
        background-color: $_BACKGROUND_COLOR_THREAD_ITEM;
      }
    }
  }
}
  
@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_MAIN_LIGHT, $_COLOR_TEXT_MAIN_TITLE_LIGHT, $_COLOR_TEXT_MAIN_SWITCH_UNREAD_LIGHT, $_BACKGROUND_COLOR_THREAD_ITEM_UNREAD_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_MAIN_DARK, $_COLOR_TEXT_MAIN_TITLE_DARK, $_COLOR_TEXT_MAIN_SWITCH_UNREAD_DARK, $_BACKGROUND_COLOR_THREAD_ITEM_UNREAD_DARK);