.field--type-comment {
  margin: 1rem 0;

  .indented {
    margin: 0;
    padding: 0 0 0 calc(20px + 1rem);

    @include mq($breakpointMedium) {
      padding: 0 0 0 calc(40px + 1rem);
    };
  }
}

.card__content-item__extend {
  .field--type-comment > .field__items {
    max-height: 80vh;
    overflow: auto;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

article.comment {
  margin: .5rem -.5rem;
  padding: .5rem;
  display: flex;
  flex-direction: row;
  border-radius: 2px;
}

.comment {
  &__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin-right: 1rem;

    .profile.teaser,
    * {
      margin: 0;
    }
  }

  &__text {
    width: calc(100% - 40px - 1rem);
    flex: 1 1 calc(100% - 40px - 1rem);
    border-bottom: 1px solid var(--comment-border-color, #{$comment-border-color});

    &__header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }


    &__meta,
    &__links {
      @include arg-typo--subtitle2;
      color: var(--arg-comment-text-meta-color, #{$arg-comment-text-meta-color});
      margin: 0;
      a {
        color: inherit;
      }
    }

    &__links {
      a {
        font-size: .875em;
        text-transform: uppercase;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  &__content {
    p {
      margin: .25rem 0 .5rem;
      &:first-child {
        margin-top: .25rem;
      }
    }
  }

  a.permalink {
    color: #000000;
  }

  &.has-parent {
    &.by-node-author {
      background-color: #F6FFFF;
      box-shadow: -2px 0 0 #099;
    }

    &.by-viewer {
      background-color: #FFF6F6;
      box-shadow: -2px 0 0 #900;
    }
  }

  // Comment form
  &__form {
    margin-top: 2rem;

    &__header {
      @include field__label_above;
    }

    .form-actions {
      margin-top: 0;
      .button {
        margin-top: 0;
        margin-bottom: 0;
      }
    }

    .form-type--textarea label,
    .filter-wrapper {
      display: none;
    }
  }

}

