.comments {
  $block: unquote("#{&}");
  padding: 0 $spacer-inner;
  overflow: auto;
  @include for-size(tablet-landscape-up) {
    padding: 0 15%;
  }
  &__container {
    background: $color-cyan_shade1;
    @include for-size(tablet-landscape-up) {
      padding: 2em 0;
    }
  }
  &__wrapper {
    background: #fff;
    margin: 1em auto;
    @include for-size(tablet-landscape-up) {
      padding: 1em 0;
      margin: 2em auto 3em;
    }
  }
  &__form {
    padding: 0.5em 0;
    @include for-size(tablet-landscape-up) {
      padding: 1em 0;
    }
    .input-group {
      padding: $spacer-small 1em;
      @include for-size(tablet-landscape-up) {
        padding: $spacer-small 10% 1em;
      }
    }
    .choice-group {
      padding: $spacer-small 1em;
      @include for-size(tablet-landscape-up) {
        padding: $spacer-small 10%;
      }
      [type="checkbox"],
      [type="radio"] {
        display: none;
        visibility: hidden;
      }
    }
  }
  &__alias {
    color: #000;
    font-size: $font-x-medium;
    margin: 0;
    text-transform: uppercase;
    &--author-notication {
      display: inline-block;
    }
    #{$block}__staff {
      color: $color-cyan_moderate;
    }
  }
  &__notice {
    color: $color-cyan_shade1;
    font-size: $font-x-medium;
    padding: 0 9.5%;
    font-weight: bold;
    text-transform: uppercase;
  }
  &__content {
    margin: 0;
    padding: $spacer-small 0;
  }
  &__description {
    padding: 1em 10%;
  }
  &__caption {
    display: inline-block;
    margin: 0;
  }
  &__article-title {
    display: block;
    font-weight: bold;
    text-decoration: underline;
    text-underline-position: under;
  }
  &__publish-date {
    color: #000;
    display: inline-block;
    font-weight: bold;
    font-size: $font-x-medium;
    margin-bottom: 0;
    text-transform: capitalize;
  }
  &__reply {
    &-meta {
      clear: both;
      overflow: auto;
      position: relative;
      width: 100%;
      padding: 0.5em 0;
      @include for-size(tablet-portrait-up) {
        padding: 1em 0;
      }
    }
  }
  &__replied {
    &-link {
      display: block;
      color: $color-cyan_moderate;
      font-weight: bold;
      padding: $spacer-half 0;
    }
  }
  &__feedback {
    color: $color-cyan_moderate;
    font-size: $font-x-medium;
    text-transform: capitalize;
    vertical-align: middle;
    text-decoration: underline;
    text-underline-position: under;
    display: inline-block;
    &--report {
      padding-right: 1em;
      color: $color-cyan_moderate;
      font-size: $font-x-medium;
    }
    &--reply-count {
      float: right;
      margin: 0;
      text-decoration: none;
    }
  }
  &__replies {
    &--wrapper {
      padding: 0 5%;
      border-left: 2px solid $color-pink-bright;
    }
    &-label {
      background-color: rgba($color-pink-bright,0.2);
      font-size: $font-medium;
      padding: 0 5%;
      @include for-size(tablet-portrait-up) {
        padding: 0 10%;
      }
    }
    &-title {
      color: $color-gray;
      font-style: italic;
      text-transform: uppercase;
      font-size: $font-x-medium;
      padding: 1em 0;
    }
  }
  &-notifications {
    padding: 0 $spacer-inner;
    text-transform: capitalize;
    &__counter {
      background-color: $color-pink;
      color: #fff;
      font-weight: bold;
      border-radius: 100%;
      display: inline-block;
      width: 30px;
      height: 30px;
      text-align: center;
      vertical-align: middle;
      padding: $spacer-small;
      margin: 0 $spacer-half 0 0;
      @include for-size(feature-only) {
        background-color: inherit;
        color: #000;
      }
      @include for-size(phone-only) {
        background-color: $color-pink;
        color: #fff;
      }
    }
    &__anchor {
      color: $color-cyan_shade1;
      display: block;
      padding: 1em 0;
      font-size: $font-x-medium;
      font-weight: bold;
      &:active, &:hover, &:focus {
        color: $color-pink;
        &:after {
          color: $color-pink;
        }
      }
      &:after {
        content: " ≫ ";
        color: $color-cyan_shade1;
        display: inline-block;
        padding: 0 $spacer-small;
      }
    }
  }
  &-replyList {
    background-color: rgba($color-cyan_shade1,0.2);
    &__item {
      padding: 1em 0 0;
      list-style-type: none;
    }
  }
  &-list {
    font-size: $font-x-medium;
    &__item {
      padding: 1em 5%;
      @include for-size(tablet-portrait-up) {
        padding: 1em 10%;
      }
      &--replies {
        background-color: rgba($color-cyan_shade1,0.2);
        padding: 0 5%;
        @include for-size(tablet-portrait-up) {
          padding: 0 10%;
        }
      }
    }
  }
  &-counter {
    background: url('/static/img/icons/ninyampinga/iconsSprite.png') no-repeat 0 86.7%/ 100%;
    color: #fff;
    display: inline-block;
    height: 30px;
    position: relative;
    padding: $spacer-small;
    text-align: center;
    text-decoration: none;
    vertical-align: bottom;
    width: 30px;
    &:active, &:hover, &:focus {
      background: url('/static/img/icons/ninyampinga/iconsSprite.png') no-repeat 0 100%/ 100%;
      color: #fff;
    }
    &__numeral {
      display: block;
      font-size: $font-x-small;
    }
  }
  .heading {
    &--secondary {
      margin: 0.5em;
      background-position: 0 10%;
      @include for-size(tablet-landscape-up) {
        margin: 1em 2em 0;
      }
    }
    &__headline {
      padding: 5% 5% 0;
    }
    &__subtitle {
      padding: 0 5%;
      @include for-size(tablet-portrait-up) {
        padding: 0 10%;
      }
    }
  }
  .call-to-action--group {
    padding: 0 5.5% 1em;
    @include for-size(tablet-portrait-up) {
      padding: 0 9.5% 1em;
    }
  }
}
