@import "../global/_variables";

// article component
.default, .edit, .imported {
  width: 392px;
  height: 392px;
  position: relative;
}

// colors (image present)
.scui-article {

  article.default {
    background-color: $blank_2;

    &:hover {
      outline: 8px solid $main_2;

      .image-overlay {
        background: $main_3;
        opacity: 0.2;
      }
    }

    .scui-article-img {
      .no-image-1 {
        color: $main_5;
      }

      .no-image-2 {
        color: $blank_1;
      }
    }

    .article-action {
      .icon {
        color: $main_6;
      }

      &:hover {
        background: $main_2;

        .icon {
          color: $blank_1;
        }
      }
    }

    .image-overlay {
      background: $main_2;
      opacity: 0;
    }

    .scui-article-content {
      .scui-article-header {
        color: $main_5;

        a {
          color: $blank_1;
        }
      }

      .scui-article-desc {
        &:hover {
          h3 {
            a {
              color: $blank_1 !important;
            }
          }
        }

        h3 {
          a {
            color: $main_7;
          }
        }
      }
    }

  }

  article.edit {
    background-color: $main_2;

    &:hover {
      outline: 8px solid $main_3;
    }

    .scui-article-content {
      .scui-article-header {
        color: $main_5;

        a {
          color: $blank_1;
        }
      }

      .scui-article-desc {
        display: flex;
        flex-direction: column;
        height: 133px;
        overflow: hidden;

        h3 {
          max-height: 40px;
          flex: 1 0 auto;
          overflow: hidden;
        }
        &:hover {
          h3 {
            a {
              text-decoration: underline;
            }
          }
        }

        h3 {
          a {
            color: $main_7;
          }
        }
      }
    }

    .scui-article-footer {
      .article-action, .article-action-2 {
        .icon {
          color: $main_6;
        }

        &:hover {
          background: $main_3;

          .icon {
            color: $blank_1;
          }
        }
      }

      .pills-box {
        .pill-info {
          background: $prim_5 !important;
          color: $blank_2;

          &:hover {
            background: $prim_6 !important;
          }
        }
      }
    }

  }

  article.imported {
    background-color: $main_2;

    &:hover {
      outline: 8px solid $main_3;

      .image-overlay {
        background: $main_9;
        opacity: 0.4;
      }
    }

    .scui-article-content {
      .scui-article-header {
        color: $main_5;

        a {
          color: $blank_1;
        }
      }

      .scui-article-desc {
        &:hover {
          h3 {
            a {
              color: $blank_1 !important;
            }
          }
        }

        h3 {
          a {
            color: $main_7;
          }
        }
      }
    }

    .scui-article-footer {
      .article-action {
        .icon {
          color: $main_6;
        }

        &:hover {
          background: $main_3;

          .icon {
            color: $blank_1;
          }
        }
      }

      .pills-box {
        .pill-info {
          background: $prim_5 !important;
          color: $blank_2;

          &:hover {
            background: $prim_6 !important;
          }
        }
      }
    }

  }

  .scui-article-footer__details {
    color: $main_7;
    font-size: 14px;
    font-weight: 300;
  }

  .scui-article-desc__commentWrap {
    margin-top: 8px;
  }

  .scui-article-desc__comment {
    color: $main_7;
    font-size: 14px;
    font-style: italic;
  }

  .scui-article-desc__commentLabel {
    font-size: 13px;
    font-weight: 400;
    color: $main_5;
    text-transform: uppercase;
  }

}

// no image
.scui-article.noImage {

  article.default {
    background-color: $blank_2;

    &:hover {
      outline: 8px solid $main_2;

      .article-no-image {
        background: $main_3;
      }
    }

    .scui-article-img {
      .no-image-1 {
        color: $main_5;
      }
    }

    .article-no-image {
      background: $main_2;
    }

    .scui-article-content {
      .scui-article-header {
        color: $main_5;

        a {
          color: $blank_1;
        }
      }

      .scui-article-desc {
        h3 {
          a {
            color: $main_7;
          }
        }
      }
    }

  }

  article.edit {
    background-color: $main_2;

    &:hover {
      outline: 8px solid $main_3;

      .image-overlay {
      }
    }

    .scui-article-img {
      .no-image-1 {
        color: $blank_2;
      }

      .no-image-2 {
        color: $main_2;
      }
    }

    .image-overlay {
    }

    .article-no-image {
      background: #97989a;
    }

    .scui-article-content {
      .scui-article-header {
        color: $main_5;

        a {
          color: $blank_1;
        }
      }

      .scui-article-desc {
        h3 {
          a {
            color: $main_7;
          }
        }
      }
    }

    .scui-article-footer {
      .article-action, .article-action-2 {
        .icon {
          color: $main_6;
        }

        &:hover {
          background: $main_3;

          .icon {
            color: $blank_1;
          }
        }
      }

      .pills-box {
        .pill-info {
          background: $prim_5 !important;
          color: $blank_2;

          &:hover {
            background: $prim_6 !important;
          }
        }
      }
    }

  }

  article.imported {
    background-color: $main_2;

    &:hover {
      outline: 8px solid $main_3;

      .article-no-image {
        background: $main_6;
      }
    }

    .article-no-image {
      background: $main_5;
    }

    .scui-article-img {
      .no-image-1 {
        color: $blank_2;
      }

      .no-image-2 {
        color: $main_2;
      }
    }

    .scui-article-content {
      .scui-article-header {
        color: $main_5;

        a {
          color: $blank_1;
        }
      }

      .scui-article-desc {
        h3 {
          a {
            color: $main_7;
          }
        }
      }
    }

    .scui-article-footer {
      .article-action {
        .icon {
          color: $main_6;
        }

        &:hover {
          background: $main_3;

          .icon {
            color: $blank_1;
          }
        }
      }

      .pills-box {
        .pill-info {
          background: $prim_5 !important;
          color: $blank_2;

          &:hover {
            background: $prim_6 !important;
          }
        }
      }
    }

  }

}

.scui-article article {

  &.edit {
    .article-action {
      position: absolute;
      width: 40px;
      height: 40px;
      right: 8px;
      bottom: 5px;
      cursor: pointer;

      .icon {
        position: absolute;
        top: 8px;
        left: 10px;
        font-size: 23px;
      }

      &:hover {
        border-radius: 50%;
      }
    }

    .article-action-2 {
      position: absolute;
      width: 40px;
      height: 40px;
      right: 48px;
      bottom: 5px;

      .icon {
        position: absolute;
        top: 7px;
        left: 7px;
        font-size: 27px;
      }

      &:hover {
        border-radius: 50%;
      }
    }
  }

  &.imported {
    .article-action {
      position: absolute;
      right: 8px;
      bottom: 8px;
      width: 40px;
      height: 40px;
      cursor: pointer;

      .icon {
        position: absolute;
        top: 7px;
        left: 7px;
        font-size: 27px;
      }

      &:hover {
        border-radius: 50%;
      }
    }
  }

  &.default {
    .article-action {
      position: absolute;
      right: 8px;
      bottom: 8px;
      width: 40px;
      height: 40px;
      cursor: pointer;

      .icon {
        position: absolute;
        top: 7px;
        left: 7px;
        font-size: 27px;
      }

      &:hover {
        border-radius: 50%;
      }
    }
  }

  // common article styles
  .icon-cloud-forecast-2 {
    color: $blank_2;
    font-size: 24px;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 1;
  }

  .scui-article-footer {
    height: 40px;
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    padding: 8px 16px;

    .pills-box {
      position: absolute;
      left: 16px;
      bottom: 12px;
      height: 32px;
      width: 32px;
      cursor: pointer;

      .pill-info {
        font-size: 16px;
        display: inline-block;
        height: 100%;
        width: 100%;
        border-radius: 50%;

        .value {
          position: absolute;
          top: 7px;
          left: 11px;
          color: $blank_2;
        }
      }
    }

    .icon {
      font-size: 20px;
    }
  }

}

// article image component
.scui-article-img {
  height: 196px;
  display: block;
  position: relative;

  .image-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .article-no-image {
    font-size: 20px;
    padding-top: 20px;
    padding-left: 16px;
    font-weight: 700;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    .no-image-1 {
      padding-bottom: 8px;
    }
  }

  .img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

}

// article content component
.scui-article-content {
  &.default {
    .scui-article-header {
      font-weight: 400;
    }
  }

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  height: 195px;

  .scui-article-header {
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 300;

    a {
      font-size: 18px;
    }
  }

  .scui-article-desc {
    h3 {
      font-size: 16px;
      line-height: 20px;

      a {
        text-decoration: none;
      }
    }
    .scui-article-footer__details {
      color: $main_7;
      margin-top: 8px;
      font-size: 14px;
    }

  }

}