/**
 * Testimonial styles loads on front end and back end
 */

.dggb-block-testimonial {
  background: #f2f2f2;
  color: #293038;
  margin: 0 auto;
  padding: 5%;
  border-radius: 5px;
  margin-bottom: 1.2em;

  .dggb-testimonial-info {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 15px;
    min-height: 55px;
    padding-top: 5px;
    line-height: 1.4;
  }

  .dggb-testimonial-info {
    .blocks-editable {
      padding-left: 0;
    }

    .dggb-testimonial-avatar-wrap {
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .dggb-testimonial-avatar-wrap + .dggb-testimonial-name,
  .dggb-testimonial-avatar-wrap
    + .dggb-testimonial-name
    + .dggb-testimonial-title,
  .dggb-testimonial-avatar-wrap + .dggb-testimonial-title,
  .dggb-testimonial-avatar-wrap + .editor-rich-text,
  .dggb-testimonial-avatar-wrap + .editor-rich-text + .editor-rich-text {
    margin-left: 70px;
    padding-left: 0;
  }

  .dggb-testimonial-text {
    p {
      line-height: 1.6;
    }

    a {
      color: inherit;
      box-shadow: 0 -1px 0 inset;
      text-decoration: none;

      &:hover {
        color: inherit;
        box-shadow: 0 -2px 0 inset;
      }
    }
  }

  .dggb-testimonial-name {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    padding: 0;
  }

  .dggb-testimonial-title {
    opacity: 0.8;
  }

  .dggb-testimonial-avatar {
    border-radius: 200px;
    max-width: 100px;
  }

  .dggb-testimonial-image-wrap {
    height: 55px;
    width: 55px;
    background: #ddd;
    border-radius: 200px;
    position: relative;

    img {
      object-fit: cover;
      height: 100%;
      width: 100%;
      position: relative;
      z-index: 10;
      border-radius: 40px;
      z-index: 5;
    }
  }
}

.right-aligned {
  .dggb-testimonial-info {
    text-align: right;

    h2 {
      left: 0;
    }

    .dggb-testimonial-name,
    .dggb-testimonial-title {
      margin-right: 70px;
      margin-left: 0;
    }

    .dggb-testimonial-avatar-wrap {
      left: auto;
      right: 0;
    }
  }
}