/*! _placeholders.scss | Friendkit | © Css Ninja. 2020-2021 */

/* ==========================================================================
Content placeholder styles
========================================================================== */

/*
    0. Base styles
    1. Compose placeholder
    2. Post placeholder
    3. List Placeloads
    4. Square widget placeload
    5. Weather widget placeload
    6. Questions menu placeload
    7. Questions settings placeload
    8. Questions side placeload
*/

/* ==========================================================================
0. Base styles
========================================================================== */

$background: #f6f7f8;
$grey-nuance-lighter: #eeeeee;
$grey-nuance-darker: #dddddd;
$lighter-grey: #e8e8e8;

.placeload {
  width: 100%;
  border-radius: 6px;
  border: 1px solid $fade-grey;
  background: $white;

  &.is-bold {
    border: none;
    background: none;
  }

  .inner-wrap {
    width: 100%;
  }

  .content-shape {
    height: 10px;
    margin-bottom: 10px;
    border-radius: 2px;

    &.is-lg {
      height: 16px;
    }
  }

  .button-shape {
    width: 130px;
    height: 38px;
    border-radius: 4px;
  }
}

.loads {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: placeload;
  animation-name: placeload;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  background: $background;
  background: $grey-nuance-lighter;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, $grey-nuance-lighter),
    color-stop(18%, $grey-nuance-darker),
    color-stop(33%, $grey-nuance-lighter)
  );
  background: -webkit-linear-gradient(
    left,
    #eeeeee 8%,
    #dddddd 18%,
    #eeeeee 33%
  );
  background: linear-gradient(
    to right,
    $grey-nuance-lighter 8%,
    $grey-nuance-darker 18%,
    $grey-nuance-lighter 33%
  );
  -webkit-background-size: 800px 104px;
  background-size: 1200px 104px;
  position: relative;
}

@-webkit-keyframes placeload {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

@keyframes placeload {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

/* ==========================================================================
1. Compose placeholder
========================================================================== */

.compose-placeload {
  height: 226px;
  margin-bottom: 20px;
  padding: 20px;

  .header {
    display: flex;
    align-items: center;
    height: 45px;
    margin-bottom: 1rem;

    .content-shape {
      width: 20%;
      margin-right: 8%;
    }
  }

  .body {
    display: flex;
    align-items: flex-start;
    height: 100px;
    padding: 16px 0;

    .img {
      width: 42px;
      min-width: 42px;
      height: 42px;
      border-radius: 50%;
    }

    .content-shape {
      margin-top: 10px;
      margin-left: 20px;

      &:first-child {
        width: 45%;
      }

      &:nth-child(2) {
        width: 25%;
      }
    }
  }
}

/* ==========================================================================
2. Post placeholder
========================================================================== */

.post-placeload {
  background: $white;
  width: 100%;
  padding: 20px;
  border: 1px solid $lighter-grey;
  border-radius: 6px;
  position: relative;
  margin-bottom: 20px;

  .header {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .img {
      width: 50px;
      min-width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    .header-content {
      margin-left: 20px;
      width: 100%;

      .content-shape {
        &:first-child {
          width: 60%;
        }

        &:nth-child(2) {
          width: 40%;
        }
      }
    }
  }

  .image-placeholder {
    width: 100%;
    margin-top: 20px;
    height: 350px;
  }

  .placeholder-footer {
    position: relative;
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .footer-block {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 100%;

      .img {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 50%;
      }

      .inner-wrap {
        margin-left: 10px;

        .content-shape {
          &:first-child {
            width: 32%;
          }

          &:nth-child(2) {
            width: 24%;
          }
        }
      }
    }
  }
}

/* ==========================================================================
3. List Placeloads
========================================================================== */

.stories-placeload,
.list-placeload {
  height: 382px;
  padding: 20px;
  margin-bottom: 20px;

  .header {
    height: 48px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .content-shape {
      width: 55%;
    }
  }

  .body {
    .flex-block {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 76px;

      .img {
        height: 44px;
        width: 44px;
        min-width: 44px;
        border-radius: 50%;
      }

      .inner-wrap {
        padding: 0 10px;

        .content-shape {
          &:first-child {
            width: 78%;
          }

          &:nth-child(2) {
            width: 54%;
          }
        }
      }
    }
  }
}

/* ==========================================================================
4. Square widget Placeload
========================================================================== */

.mini-widget-placeload {
  height: 323px;
  padding: 20px;
  margin-bottom: 20px;

  .body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 283px;

    .img {
      margin-top: -20px;
      height: 50px;
      width: 50px;
      min-width: 45px;
      border-radius: 50%;
      margin: 0 auto 20px auto;
    }

    .content-shape {
      margin: 0 auto 12px auto;

      &:nth-child(2) {
        width: 38%;
      }

      &:nth-child(3) {
        width: 88% !important;
      }

      &:nth-child(4) {
        width: 64% !important;
      }
    }

    .button-shape {
      margin: 24px auto 0 auto;
    }
  }
}

/* ==========================================================================
5. Weather widget placeload
========================================================================== */

.weather-widget-placeload {
  height: 450px;
  padding: 20px;
  margin-bottom: 20px;

  .header {
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;

    .inner-wrap {
      .img {
        height: 60px;
        width: 60px;
        min-width: 45px;
        border-radius: 50%;
        margin: 0 auto 20px auto;
      }

      .content-shape {
        margin: 0 auto 12px auto;

        &:nth-child(2) {
          width: 44%;
        }

        &:nth-child(3) {
          width: 88% !important;
        }
      }
    }
  }

  .body {
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;

    .inner-wrap {
      .rect {
        height: 85px;
        width: 100%;
        min-width: 100%;
        border-radius: 4px;
        margin: 0 auto 30px auto;
      }

      .content-shape {
        margin: 12px auto;

        &:nth-child(2) {
          width: 88%;
        }

        &:nth-child(3) {
          width: 44%;
        }
      }
    }
  }
}

/* ==========================================================================
6. Questions menu placeload
========================================================================== */

.questions-menu-placeload {
  width: 100%;

  .inner-wrap {
    .content-shape {
      height: 22px;
      margin-bottom: 16px;

      &:first-child {
        max-width: 90%;
      }

      &:nth-child(2) {
        max-width: 50%;
      }

      &:nth-child(3) {
        max-width: 65%;
      }

      &:nth-child(4) {
        max-width: 20%;
      }
    }
  }
}

/* ==========================================================================
7. Questions settings placeload
========================================================================== */

.questions-settings-placeload {
  width: 100%;

  &.is-card {
    padding: 30px;
    margin-top: 30px;

    .content-shape {
      &:nth-child(4) {
        margin-bottom: 0;
      }
    }
  }

  .inner-wrap {
    .content-shape {
      height: 18px;
      margin-bottom: 16px;

      &:first-child {
        max-width: 30%;
      }

      &:nth-child(2) {
        max-width: 60%;
      }

      &:nth-child(3) {
        max-width: 75%;
      }

      &:nth-child(4) {
        max-width: 30%;
      }
    }
  }
}

/* ==========================================================================
8. Questions side placeload
========================================================================== */

.questions-side-placeload {
  width: 100%;
  padding: 30px;
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }

  .inner-wrap {
    .img {
      height: 60px;
      width: 60px;
      min-width: 45px;
      border-radius: 50%;
      margin: 0 auto 20px auto;
    }

    .content-shape {
      height: 14px;
      margin-bottom: 16px;

      &:nth-child(2) {
        max-width: 70%;
      }

      &:nth-child(3) {
        max-width: 90%;
      }

      &:nth-child(4) {
        max-width: 40%;
        margin-bottom: 0;
      }
    }
  }
}

/* ==========================================================================
9. Questions single placeload
========================================================================== */

.questions-single-placeload {
  width: 100%;

  &.is-header {
    &.is-spaced {
      margin-top: 30px;
    }

    .content-shape {
      &:first-child {
        max-width: 70%;
        height: 18px;
      }
    }
  }

  &.is-card {
    padding: 30px;
    margin-top: 30px;

    .card-head {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .img {
        height: 40px;
        width: 40px;
        min-width: 40x;
        border-radius: 50%;
      }

      > .content-shape {
        width: 100%;
        height: 16px;
        max-width: 40%;
        margin: 0 0 0 12px;
      }
    }

    .content-shape {
      margin-bottom: 16px;

      &.is-body {
        height: 15px;

        &:nth-child(2) {
          max-width: 80%;
        }

        &:nth-child(3) {
          max-width: 95%;
        }

        &:nth-child(4) {
          max-width: 60%;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

/* ==========================================================================
9. Questions stats placeload
========================================================================== */

.questions-stats-placeload {
  width: 100%;

  &.is-header {
    margin-bottom: 20px;
    padding: 30px;

    .inner-wrap {
      display: flex;
      align-items: center;

      .img {
        height: 80px;
        width: 80px;
        min-width: 80px;
        border-radius: 50%;
      }

      > div {
        width: 100%;
        margin-left: 20px;
      }

      .content-shape {
        width: 100%;
        height: 14px;
        max-width: 40%;
        margin-bottom: 12px;

        &:first-child {
          max-width: 50%;
        }

        &:nth-child(2) {
          max-width: 30%;
        }

        &:nth-child(3) {
          max-width: 20%;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  &.is-carousel {
    border: none;
    background: none;

    .grid-title {
      padding: 14px 0;

      .content-shape {
        height: 16px;
        max-width: 20%;
      }
    }

    .placeload-grid {
      display: flex;

      .grid-item {
        margin: 6px;
        width: calc(33% - 12px);
        height: 200px;
        background: $white;
        border: 1px solid darken($fade-grey, 1%);
        border-radius: 8px;

        .img {
          height: 60px;
          width: 60px;
          min-width: 60x;
          border-radius: 50%;
          margin: 30px auto;
        }

        .shapes {
          .content-shape {
            margin: 0 auto 10px;
            height: 12px;

            &:first-child {
              max-width: 70%;
            }

            &:nth-child(2) {
              max-width: 30%;
            }
          }
        }
      }
    }
  }

  &.is-activity {
    border: none;
    background: none;
    margin-top: 20px;

    .activity-title {
      padding: 14px 0;

      .content-shape {
        height: 16px;
        max-width: 20%;
      }
    }

    .unit-list {
      padding: 20px 0;

      .unit {
        display: flex;
        padding-left: 12px;
        margin-bottom: 20px;
        margin-top: 10px;

        &:last-child {
          margin-bottom: 0;
        }

        .img {
          height: 44px;
          width: 44px;
          min-width: 44px;
          border-radius: 50%;
        }

        .unit-meta {
          width: 100%;
          margin-left: 20px;

          .content-shape {
            height: 14px;

            &:first-child {
              max-width: 60%;
            }

            &:nth-child(2) {
              max-width: 30%;
              height: 12px;
            }

            &:nth-child(3) {
              height: 10px;
              max-width: 20%;
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
10. Questions categories placeload
========================================================================== */

.questions-categories-placeload {
  width: 100%;

  .is-tile-placeload {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: $white;
    border: 1px solid darken($fade-grey, 3%);
    border-radius: 8px;
    padding: 30px;

    &.is-card {
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;

      .img {
        max-width: 160px;
      }

      .placeload-content {
        margin-top: 0;
        margin-left: 30px;
        width: 100%;

        .content-shape {
          &:first-child {
            max-width: 80%;
          }

          &:nth-child(2) {
            max-width: 60%;
          }

          &:nth-child(3) {
            max-width: 90%;
          }

          &:nth-child(4) {
            max-width: 40%;
          }
        }
      }
    }

    .img {
      height: 140px;
      width: 100%;
      border-radius: 2px;
    }

    .placeload-content {
      margin-top: 30px;

      .content-shape {
        height: 14px;

        &:first-child {
          max-width: 80%;
        }

        &:nth-child(2) {
          max-width: 40%;
        }
      }
    }
  }
}
