.ias-comment {
  align-items: flex-start;
  display: flex;
  font-size: $comment-font-size;
  margin-bottom: $comment-margin-bottom;

  > i,
  > .ias-avatar,
  > .ias-icon-button,
  > .ias-menu {
    flex: none;
  }

  > i {
    font-size: $icon-size-avatar;
  }

  > i,
  > .ias-avatar {
    margin-right: $comment-avatar-margin;
    margin-top: $comment-margin-top;
  }

  > .ias-avatar {
    height: $icon-size-avatar;
    width: $icon-size-avatar;
  }

  > .ias-button.ias-icon-button {
    &:hover {
      background-color: transparent;
      border-color: transparent;
    }
  }

  > .ias-menu {
    .ias-button.ias-icon-button {
      &:hover {
        background-color: transparent;
        border-color: transparent;
      }
    }
  }

  > .ias-comment-content {
    margin-top: $comment-margin-top;
    flex-grow: 1;

    p {
      margin: $comment-paragraph-margin;
    }

    .ias-author {
      font-size: $comment-author-font-size;
      font-weight: $comment-author-font-weight;
      margin-right: $comment-spacing;
    }

    .ias-button.ias-icon-button {
      .ias-icon {
        font-size: $comment-icon-font-size;
      }
    }

    .ias-date {
      color: $comment-date-color;
      font-size: $comment-date-font-size;
      margin-right: $comment-spacing;
    }
  }
}

.ias-comment-thread {
  border: 1px solid $comment-thread-border-color;
  border-radius: $border-radius;
  max-width: $comment-thread-max-width;

  > .ias-body {
    padding: $comment-thread-body-padding;

    > .ias-date {
      border-bottom: 1px solid $comment-thread-border-color;
      color: $comment-date-color;
      font-size: $comment-date-font-size;
      line-height: $comment-thread-date-line-height;
      margin: $comment-thread-date-margin;
    }
  }

  > .ias-footer {
    background-color: $comment-thread-bg-color;
    padding: $comment-thread-footer-padding;

    > .ias-actions {
      text-align: right;
    }
  }

  > .ias-header {
    background-color: $comment-thread-bg-color;
    display: flex;
    font-size: $comment-thread-header-font-size;
    justify-content: space-between;
    padding: $comment-thread-header-padding;
  }
}

[dir="rtl"] {
  .ias-comment {
    > i,
    > .ias-avatar {
      margin-left: $comment-avatar-margin;
      margin-right: 0;
    }

    > .ias-comment-content {
      .ias-author,
      .ias-date {
        margin-left: $comment-spacing;
        margin-right: 0;
      }
    }
  }

  .ias-comment-thread {
    > .ias-footer {
      > .ias-actions {
        text-align: left;
      }
    }
  }
}