@import '../../styles/app';

.widgets-page {
  // Top stat cards - align icon and text center
  .row.flex-nowrap {
    align-items: center;
    justify-content: center;
  }

  /*          Post User           */
  .post-user {
    position: relative;

    @include clearfix();

    img {
      border: 3px solid white;
    }
  }

  .post-comments .comment-body {
    overflow: auto;
  }

  /*            Tags              */
  .tags {
    padding-left: 0;
    list-style: none;

    @include clearfix();

    > li {
      float: left;

      > a {
        padding: 2px 8px;
        font-size: $font-size-mini;
        border-radius: 6px;
        color: inherit;
        text-decoration: none;
        background: $violet;

        &:hover {
          background-color: darken($violet, 20%);
        }

        .fa {
          font-size: 8px;
          margin-right: 3px;
          opacity: 0.8;
        }
      }
    }

    > li + li > a {
      margin-left: 6px;
    }
  }

  .widget-top-overflow > img + .tags {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 20px;
  }

  /*           Weather             */
  .widget-image .forecast {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
  }

  /*       Chat List Group         */
  .widget-chat-list-group {
    padding-top: $spacer * 0.5;

    .list-group-item {
      margin-left: $widget-padding-horizontal;
      margin-right: $widget-padding-horizontal;
      padding: 0;
      border: 0;
      display: flex;

      div {
        width: 100%;
      }

      &:nth-child(even) {
        margin-left: 75px;
      }

      &:hover {
        background: none;
      }

      & + .list-group-item {
        margin-top: 20px;
      }

      .thumb,
      .thumb-sm {
        float: left;
        margin-right: 15px;
      }

      .time {
        font-size: $font-size-sm;
        color: $text-muted;
      }

      .sender {
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: $font-size-mini;
        font-weight: $font-weight-normal;
        color: $text-color;
      }

      .body {
        font-size: $font-size-mini;
        margin-bottom: 0;
      }

      &.on-right {
        div {
          padding-right: 1rem;
        }

        .thumb,
        .thumb-sm {
          order: 1;
          margin-left: auto;
          margin-right: 0;
        }

        .time {
          float: left;
        }

        .sender {
          text-align: right;
        }
      }
    }
  }

  .carousel-enter-from {
    transform: translateY(100%);
  }

  .carousel-leave-to {
    transform: translateY(-100%);
  }

  .carousel-enter-active, .carousel-leave-active {
    transition: all .75s;
  }

  .carousel-feature-widget {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .flip-enter-from {
    transform: rotateY(-90deg);
  }

  .flip-leave-to {
    transform: rotateY(90deg);
  }

  .flip-enter-active, .flip-leave-active {
    transition: all .5s;
  }
}
