.anycomment-app {
  @import '../common/mobile_variables';

  @mixin avatar() {
    background-size: cover;
    background-position: center center;
    border: 1px solid $semi-hidden-color;
    background-color: #DDE2E5;
    border-radius: $avatar-border-radius;
  }

  @mixin avatar-parent() {
    width: $parent-avatar-size;
    height: $parent-avatar-size;
  }

  @mixin avatar-child() {
    width: $child-avatar-size;
    height: $child-avatar-size;
  }

  @media (max-width: 500px) {

    .anycomment-btn,
    .input[type="submit"],
    input + .input[type="button"] {
      @include button();

      &:hover,
      &:active,
      &:focus {
        @include button();
        background-color: $btn-background-color-active !important;
      }
    }

    .anycomment-form-reply {
      padding-left: 0;

      .anycomment-form {
        &__submit {
          &-status {
            margin-right: 0;
            margin-bottom: 6px;
          }
        }
      }
    }

    .anycomment-form.anycomment-form-authorized {
      .anycomment-form-body-outliner {
        &__avatar {
          top: 18px;
          left: 13px;
          width: $parent-avatar-size;
          height: $parent-avatar-size;
        }
      }
    }

    .anycomment-form {
      .anycomment-form-body-outliner {
        &_logo {
          left: 17px;
          top: 16px;
          width: $parent-avatar-size;
          height: $parent-avatar-size;
        }
      }
    }

    // Send comment
    .anycomment-send-comment {
      margin-bottom: $form-after-space;

      &-supheader {
        font-size: $font-size;
        margin-bottom: 10px;

        &__dropdown {
          &-header,
          &-list {
            font-size: $font-size;
          }

          &-list {
            @include border-radius($global-radius);
          }
        }
      }

      &-body {
        &-reply {
          font-size: $font-size - 2;
        }

        &,
        &-outliner {
          width: 100%;
        }

        &-outliner {
          @include border-radius($global-radius);

          &__auth {
            background-color: rgba(255, 255, 255, .9);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 4;
            width: 100%;
            height: 100%;

            &-header {
              color: $text-color;
              font-size: $font-size + 3;
              margin-right: 21px;
            }

            // List of socials to login
            ul {
              list-style: none;
              padding: 0;
              display: table;
              margin: 17px auto 6px;

              li {
                display: inline-block;
                vertical-align: middle;
                margin-right: 6px;

                &:last-of-type {
                  margin-right: 0;
                }

                & img {
                  width: 30px;
                  height: 30px;
                }
              }
            }

            // Case when user agreement link is not set in settings
            &.no-link {
              ul {
                margin: 32px auto;
              }
            }
          }

          &__textfield {
            font-size: $font-size;
            padding: $comment-field-padding !important;
            min-height: $comment-field-default-height;
          }
        }

        .anycomment-form-guest {
          &__header {
            font-size: $font-size - 6;
            color: $semi-hidden-color;
          }

          &__container {
            .anycomment-form-guest-socials,
            .anycomment-form-submit {
              display: block;
              width: 100%;
            }
          }
        }

        .anycomment-input-list {
          width: 100%;

          &-single {
            display: block;
            padding-right: 0;
            width: 100%;

            label {
              font-size: $font-size - 3;
            }

            input[type="text"],
            input[type="email"],
            input[type="number"] {
              font-size: $font-size - 4;
              @include border-radius($global-radius);
            }
          }
        }
      }
    }

    // Comments list
    .anycomment-list {
      .comment-single {
        margin-bottom: $medium-space;

        &-replies {
          margin-top: $medium-space;
        }

        &-avatar {
          &,
          &__img {
            @include avatar-parent();
          }

          &__img {
            @include avatar();

            &-auth-type {
              bottom: $parent-avatar-size - ($parent-avatar-size - 6);
              right: $parent-avatar-size - ($parent-avatar-size - 6);
              width: $parent-avatar-size / 4;
              height: $parent-avatar-size / 4;
            }
          }
        }

        &-body {
          &-header {
            &__author {
              &,
              & > a {
                font-size: $font-size - 1;
              }

              &-owner {
                font-size: $font-size - 6;
                margin-left: 5px;
                @include border-radius($btn-radius);
              }
            }

            &__date {
              font-size: $font-size - 2;
              min-height: $small-space;
              line-height: $small-space;
            }
          }

          &__text {
            &-content {
              font-size: $font-size;
            }

            &-readmore {
              font-size: $font-size - 2;
            }
          }

          .comment-attachments {
            li {
              .comment-attachment {
                width: $attachment-size;
                height: $attachment-size;
                line-height: $attachment-size;
                font-size: $font-size - 7;
                color: darken($attachment-color, 15%);
                @include border-radius($global-radius);
              }
            }
          }

          &__actions {
            ul {
              li {
                margin-right: $small-space;

                a, span {
                  font-size: $font-size - 1;
                }
              }
            }
          }
        }

      }

      // Child comments
      &-child {
        .comment-single {
          &-avatar {
            &,
            &__img {
              @include avatar-child();
            }
          }

          &-body {
            .comment-attachments {
              li {
                .comment-attachment {
                  width: $attachment-child-size;
                  height: $attachment-child-size;
                  line-height: $attachment-child-size;
                  font-size: $font-size - 9;
                }
              }
            }
          }
        }
      }
    }

    & > .anycomment-list {

      ul.anycomment-list-child {
        .comment-single-body {
          padding-left: $comment-child-space;
        }
      }

      & > .comment-single {

        & > .comment-single-body {
          padding-left: $comment-parent-space;
        }

        & > .comment-single-replies {
          // Second level
          & > ul.anycomment-list-child {
            margin-left: $comment-parent-space / 2;

            // Third level
            & > li {
              & > .comment-single-replies {
                & > ul.anycomment-list-child {
                  margin-left: $comment-parent-space / 2;
                }
              }
            }
          }
        }
      }
    }

    // Footer
    .anycomment-copy-footer {
      margin-top: $big-space;
      padding-top: $medium-space;
      font-size: $font-size - 3;
    }
  }
}