@import 'settings';

// Make sure comment anachors are not hidden
// behind fixed navigation (which is 50px tall).
a[id^="comment-"] {
  display: block;
  position: relative;
  top: -($navbar-height + 20px);
  visibility: hidden;
}

.comment {
  position: relative;
  margin-top: 1em;
  line-height: 1.2;
  display: flex;
  width: 100%;

  &:first-child {
    margin-top: 0;
  }

  .form-actions .btn {
    margin-bottom: 0;
  }

  .ajax-throbber.glyphicon:before {
    display: block;
    top: 0;
  }

}

.comment__avatar {
  margin-right: 8px;
  width: 38px;
  height: 38px;
  flex-shrink: 0;

  [dir='rtl'] & {
    margin-right: 0;
    margin-left: 8px;
  }

  @include for-tablet-portrait-up {
    margin-right: 12px;

    [dir='rtl'] & {
      margin-right: 0;
      margin-left: 12px;
    }
  }

}

.comment__content {
  flex: 1;

  @include for-tablet-portrait-up {
    max-width: calc(100% - 50px);
  }
}

.comment__author {
  color: $gray-base;
  padding-right: 30px;

  [dir='rtl'] & {
    padding-right: 0;
    padding-left: 30px;
  }
}

.comment__metadata {
  display: inline-block;
  font-size: $button-font-size-small;
  color: $gray-light;

  > * {
    display: inline-block;
    margin-right: 0.5em;
  }

}

.comment__text {
  margin: .25em 0 .5em;
  line-height: 1.3;
  overflow-y: auto;

  p:last-of-type {
    margin-bottom: 0;
  }

  p,
  ul,
  ul li,
  a {
    word-break: break-word;
  }

  // like badge
  .badge {
    margin: 0;
    line-height: 1;
    padding: 2px 0.6em
  }

  @include for-tablet-portrait-up {
    .vote-widget {
      position: relative;
      padding-left: 23px;


      .icon-vote {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }

}

.comments {
  margin-bottom: 0.5em;
  padding: 1em 0.5em 1em 1em;

  @include for-tablet-landscape-up {
    margin-left: 56px;
  }

  .comment:first-of-type {
    margin-top: 0;
  }

  // avatars in replies should be smaller
  .comment__avatar {
    width: 34px;

    img {
      width: 34px;
      height: 34px;
    }
  }

}

// make sure the btn-group is positioned top right of the comment
.comment__actions {
  position: absolute;
  top: -8px;
  right: 0;

 [dir='rtl'] & {
   left: 0;
   right: auto;
 }
}

.comment__reply-btn {
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: $button-font-size-small;
  margin-right: 10px;
}

// Comment form needs to have usable layout on mobile

.comment__avatar {
  display: none;

  @include for-tablet-portrait-up {
    display: block;
  }
}

.comment-form {

  .form-managed-file {
    padding-right: 40px;
  }

  @include for-phone-only {

    .btn--comment-submit {
      padding-left: 6px;
      padding-right: 6px;
      margin-bottom: 0;

      .label {
        font-size: 0;
        text-indent: -9999px;
      }

    }

  }

  @include for-tablet-portrait-up {
    .btn-icon {
      display: none;
    }
  }

  textarea.form-control {
    height: $input-height-base;
  }

}

/*
* Fix styles if last of page textarea is focused on mobile
* Only for page with textareas.
 */
.main-container.open-keyboard {
  @include for-phone-only {
    padding-bottom: 270px;
  }
}

// when optional module social_comment_upload is enabled
.comment-attachments {
  flex: 1 0 100%;

  .btn {
    margin-left: 0;
  }

  &:not([open]) > *:not(summary) {
    display: none;
  }

  > summary:before {
    content: '';
    display: none;
  }

  .btn-link {
    padding-left: 0;
    padding-right: 0;

    svg {
      outline: none;
      cursor: pointer;
      user-select: none;
      vertical-align: bottom;
    }

  }

}

/* Hide the default marker. */
summary::-webkit-details-marker {
  display: none;
}

summary::-moz-list-bullet {
  list-style-type: none;
}

// Set state for open details
details .details__close-icon,
details[open] .details__open-icon {
  display: none;
}

details .details__open-icon,
details[open] .details__close-icon {
  display: inline-block;
}

.comment-unpublished {
  img {
    opacity: 0.5;
  }
  .badge-default {
    background-color: $gray-light;
    color: white;
  }
  * {
    color: #9b9b9b;
  }
}

/* Photoswipe gallery displayed in comments. */
.comment .photoswipe-gallery-custom {
  margin-top: .5rem;
}

/* Loading-throbber when comments are loading. */
@keyframes glyphicon-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.card__comment_section {
  [data-big-pipe-placeholder-id] {
    &:first-child {
      display: block;
      width: 20px;
      height: 20px;
      margin: auto;
      background: url('../images/icons/icon-autorenew.svg') no-repeat center center/auto 100%;
      animation: glyphicon-spin 1s infinite linear;
    }
  }
}

.comment-comment-form {
  @include for-phone-only {
    > .form-group-inline {
      justify-content: flex-end;
    }

    .media-body {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
}

.comments-sticky {
  border: 1px solid $gray-lighter;
  padding: 10px;
  border-radius: 2px;
  margin-bottom: 2em;
}
