.anycomment-app {
  // Send comment
  .anycomment-form {
    width: 100%;
    margin-bottom: 20px;

    // Terms
    &__terms {
      display: flex;
      padding: 10px 0;
      align-items: center;

      &-agreement {
        input[type="checkbox"] {
          vertical-align: middle;
          margin: 0 14px 0 5px;
          padding: 0;
        }

        label {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-weight: normal;
          color: $semi-hidden-color;
          font-size: $font-size;

          a {
            color: $link-color;
          }
        }
      }
    }

    // Submit
    &__submit {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;

      &-status {
        margin-right: 30px;

        &-action {
          margin-left: 20px;

          .anycomment-icon {
            cursor: pointer;
          }
        }
      }

      &-button {

      }
    }

    // List of inputs: name, email, website
    &__inputs {
      display: flex;
      flex-direction: column;
      flex-grow: 2;
      justify-content: space-between;
      margin-bottom: 20px;

      &-item {
        margin-bottom: 4px;

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

        label {
          color: $semi-hidden-color;
          font-weight: normal;
          font-size: $font-size;
          margin-bottom: 2px;
          line-height: 1.3;
          display: block;
        }

        label,
        input,
        textarea {
          width: 100%;
        }

        input[type="text"],
        input[type="email"],
        input[type="number"] {
          background-color: $form-field-background-color;
          border: 1px solid $semi-hidden-color !important;
          color: $text-color !important;
          outline: 0;
          height: 31px !important;
          line-height: 31px !important;
          padding: 5px 10px !important;
          font-size: $font-size;
          text-align: left;
          @include border-radius($global-radius);

          &:hover,
          &:active,
          &:focus {
            border: 1px solid darken($semi-hidden-color, 5%) !important;
          }
        }
      }
    }

    // Social list
    &__guest-socials {
      display: flex;
      flex-grow: 1;
      margin-bottom: 15px;

      &-text {
        margin: 0 18px 0 0;
      }

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

      ul {
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        &, & > li {
          list-style: none;
        }

        li {
          margin: 0 5px 0 0;

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

          a {
            &:hover,
            &:focus,
            &:active {
              opacity: 0.8;
            }
          }
        }
      }
    }

    &__reply {
      display: flex;
      flex-grow: 1;
      justify-content: start;
      font-size: $font-size;
      margin-top: 10px;

      span {
        color: $link-color;
        font-weight: bold;
        padding: 2px 5px;
        display: inline-block;
        cursor: pointer;
        user-select: none;
        appearance: none;
      }
    }

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

      &-outliner {
        border: 1px solid $semi-hidden-color;
        min-height: 64px;
        position: relative;
        background-color: $form-field-background-color;
        margin-bottom: 10px;
        @include border-radius($global-radius);

        &__logo {
          position: absolute;
          left: 27px;
          top: 15px;
          width: 30px;
          height: 30px;
          z-index: 2;

          & svg {
            width: 100%;
            height: 100%;
          }
        }

        &__select-file {
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          cursor: pointer;
          z-index: 2;
          width: 38px;
          display: flex;
          align-content: center;
          align-items: center;
          padding-left: 10px;

          .anycomment-icon {
            color: #747B7E;
            font-size: $font-size + 2;

            &:hover,
            &:active,
            &:focus {
              opacity: $semi-hidden-color;
            }
          }
        }
      }

      // Dropzone
      &-outliner-dropzone-active {
        border-style: dashed;

        &::before {

          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          background: url('../img/dropzone.svg');
          background-size: cover;
          width: 60px;
          height: 60px;
          z-index: 4;
          opacity: 0.5;
          margin-left: -30px;
          margin-top: -30px;
        }

        &::after {
          background-color: rgba(255, 255, 255, 0.9);
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
          content: '';
        }
      }
    }
  }

  .anycomment-form-reply,
  .anycomment-form-update {
    padding-left: $comment-parent-space;
  }

  // Authorized user styles
  .anycomment-form-authorized {
    .anycomment-form-body-outliner {
      &__avatar {
        @include avatar();
        @include avatar_child();
        z-index: 1;
      }
    }
    .anycomment-form__terms {
      padding: 0;
      justify-content: flex-end;
    }
  }

  // Mobile styles
  @media (max-width: 500px) {
    .anycomment-form {

      &-body {
        &-outliner {
          &__logo {
            left: 16px;
            top: 18px;
            width: 25px;
            height: 25px;
          }
        }
      }

      &__inputs {
        margin-bottom: 10px;

        &-item {
          padding: 0;
          margin-bottom: 4px;
        }
      }
    }
  }
}