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

.empty-mailbox-container {
  .empty-content {
    .empty-icon {
      width: 192px !important;
      height: 162px !important;

      &.default-empty-mailbox {
        background-image: url(../#{$_PATH_TO_IMAGES}/default-empty-mailbox.svg);
      }
    }

    .cptx-linear-animate {
      border-radius: 3px;
      height: 6px;
      margin: 8px auto;
      overflow: hidden;
      width: 95%;

      .cptx-indeterminate {
        border-radius: 3px;
        height: 100%;
        position: relative;
        width: 100%;

        &:before {
          content: '';
          background-color: #53AAF9;
          border-radius: 3px;
          position: absolute;
          height: 100%;
          animation: cptx-indeterminate_first 1.5s infinite ease-out;
        }

        &:after {
          content: '';
          border-radius: 3px;
          position: absolute;
          height: 100%;
          animation: cptx-indeterminate_second 1.5s infinite ease-in;
        }
      }

      @keyframes cptx-indeterminate_first {
        0% {
          left: -100%;
          width: 100%;
        }
        100% {
          left: 100%;
          width: 10%;
        }
      }
      
      @keyframes cptx-indeterminate_second {
        0% {
          left: -150%;
          width: 100%;
        }
        100% {
          left: 100%;
          width: 10%;
        }
      }
    }
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_MAIN_EMPTY, $_BACKGROUND_COLOR_MAIN_EMPTY_LOADING, $_BACKGROUND_COLOR_MAIN_EMPTY_LOADING_BAR){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .empty-mailbox-container {
      background-color: $_BACKGROUND_COLOR_MAIN_EMPTY;
      .empty-content {
        .empty-icon {
          &.empty-inbox {
            background-image: url(../#{$_PATH_TO_IMAGES}/empty-inbox-#{$_THEME}.svg);
          }
          &.empty-starred {
            background-image: url(../#{$_PATH_TO_IMAGES}/empty-starred-#{$_THEME}.svg);
          }
          &.empty-trash {
            background-image: url(../#{$_PATH_TO_IMAGES}/empty-trash-#{$_THEME}.svg);
          }
          &.empty-draft {
            background-image: url(../#{$_PATH_TO_IMAGES}/empty-draft-#{$_THEME}.svg);
          }
          &.empty-sent {
            background-image: url(../#{$_PATH_TO_IMAGES}/empty-sent-#{$_THEME}.svg);
          }
          &.empty-spam {
            background-image: url(../#{$_PATH_TO_IMAGES}/empty-spam-#{$_THEME}.svg);
          }
          &.empty-allmail {
            background-image: url(../#{$_PATH_TO_IMAGES}/empty-allmail-#{$_THEME}.svg);
          }
          &.empty-search {
            background-image: url(../#{$_PATH_TO_IMAGES}/empty-search-#{$_THEME}.svg);
          }
          &.loading-search {
            background-image: url(../#{$_PATH_TO_IMAGES}/loading-search-#{$_THEME}.svg);
          }
        }

        .cptx-linear-animate {
          background-color: $_BACKGROUND_COLOR_MAIN_EMPTY_LOADING;

          .cptx-indeterminate {
            &:after {
              background-color: $_BACKGROUND_COLOR_MAIN_EMPTY_LOADING_BAR;
            }
          }
        }
      }
    }
  }
}

@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_MAIN_EMPTY_LIGHT, $_BACKGROUND_COLOR_MAIN_EMPTY_LOADING_LIGHT, $_BACKGROUND_COLOR_MAIN_EMPTY_LOADING_BAR_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_MAIN_EMPTY_DARK, $_BACKGROUND_COLOR_MAIN_EMPTY_LOADING_DARK, $_BACKGROUND_COLOR_MAIN_EMPTY_LOADING_BAR_DARK);