// Social section

// Feed
// stylelint-disable selector-max-class
// stylelint-disable selector-max-combinators
// stylelint-disable selector-max-compound-selectors
.mdb-feed {
  .news {
    display: flex;
    .label {
      display: block;
      flex: 0 0 auto;
      align-self: stretch;
      width: 2.5rem;
      img {
        width: 100%;
        height: auto;
      }
    }
    .excerpt {
      display: block;
      flex: 1 1 auto;
      align-self: stretch;
      margin: 0 0 1.2rem 1.2rem;
      word-wrap: break-word;
      .brief {
        padding-bottom: .5rem;
        font-weight: 500;
        a {
          color: $primary-color;
        }
        .name {
          display: inline-block;
          vertical-align: baseline;
        }
        .date {
          display: inline-block;
          float: none;
          padding-left: .7rem;
          font-size: .86rem;
          font-weight: 300;
          color: $grey-base;
        }
      }
      .added-images {
        margin-bottom: .6rem;
        img {
          display: inline-block;
          width: 7rem;
          margin-right: .3rem;
        }
      }
      .added-text {
        max-width: 450px;
        margin-bottom: .6rem;
      }
      .feed-footer {
        .like {
          font-size: .86rem;
          font-weight: 300;
          color: $grey-base;
          &:hover {
            .fas,
            .fab,
            .far {
              color: $red-base;
              transition: .4s;
            }
            span {
              color: $black-base;
              transition: .4s;
            }
          }
          .fas,
          .fab,
          .far {
            padding-right: .5rem;
          }
        }
        span a {
          padding-right: .3rem;
          color: $primary-color;
          cursor: default;
        }
        .thumbs {
          .fas,
          .fab,
          .far {
            color: $grey-base;
            transition: .4s;
            &:hover {
              color: $grey-darken-1;
            }
          }
          .fa-thumbs-up {
            padding-right: .3rem;
          }
        }
        .comment {
          color: $grey-base;
        }
      }
    }
  }
}

// Personal card
.card-personal {
  .card-body {
    .card-title {
      margin-bottom: .3rem;
      font-weight: 400;
      &.title-one {
        transition: .4s;
        &:hover {
          color: $primary-color;
        }
      }
    }
    .card-meta {
      font-size: .86rem;
      font-weight: 300;
      color: $grey-darken-1;
      .fas,
      .fab,
      .far {
        padding-right: .5rem;
      }
    }
    span {
      transition: .5s;
      &:hover {
        color: $primary-color;
      }
    }
  }
}

// News card
.news-card {
  .content {
    .right-side-meta {
      float: right;
      margin-top: .3rem;
      font-weight: 300;
      color: $grey-base;
    }
    .avatar-img {
      width: 2rem;
      margin-right: 1rem;
    }
    img {
      display: inline-block;
      max-width: 100%;
      vertical-align: middle;
      border-radius: 50%;
    }
  }
  .social-meta {
    .fas,
    .fab,
    .far {
      padding-right: .6rem;
    }
    .fa-heart-o {
      color: rgba($black-base, .4);
      cursor: pointer;
      transition: .53s;
      &:hover {
        color: $red-base;
      }
    }
    span {
      float: right;
    }
  }
  .md-form {
    margin-top: 1.3rem;
    margin-bottom: .3rem;
    .prefix {
      margin-left: .2rem;
      font-size: 1.5rem;
      color: rgba($black-base, .4);
      ~ input,
      .md-form .prefix ~ textarea {
        width: calc(100% - 4rem);
      }
    }
    .prefix.active {
      color: rgba($black-base, .4);
    }
    .form-control {
      height: 1.3rem;
      padding-top: 0;
      padding-bottom: .5rem;
      margin-bottom: 0;
      margin-left: 3rem;
      border-bottom: 1px solid rgba($black-base, .1);
    }
  }
}