/*!
 * @package   AkeebaEngage
 * @copyright Copyright (c)2020-2022 Nicholas K. Dionysopoulos / Akeeba Ltd
 * @license   GNU General Public License version 3, or later
 */

@import "sources/variables";

section.akengage-outer-container {
  margin-top: 12pt;
  margin-bottom: 12pt;
  border-bottom: thin solid $grey;
  padding: .5em 0;

  h3.akengage-title {
    border-bottom: thin solid $grey;
  }

  div.akengage-list-container {
    padding: 0 .5em;

    // First level comments have no margin
    & > ol.akengage-comment-list {
      margin-left: 0;
      padding-left: 0;
    }

    ol.akengage-comment-list {
      margin-top: .5em;

      button {
        background: none;
        border: 2px solid rgba(0, 0, 0, 0);
        color: $teal;
        display: inline-block;
        margin: 0;
        padding: .25em .5em;
        vertical-align: center;

        &:hover {
          color: lighten($teal, 10%);
        }
      }

      li.akengage-comment-item {
        list-style: none;
        margin-top: 1em;

        article[class^=akengage-comment] {
          border-left: 4px solid $light-grey;
          margin-bottom: 1em;
          margin-top: .5em;
          padding-left: 1em;

          footer.akengage-comment-properties {
            background-color: lighten($light-grey, 5%);
            margin-bottom: .25em;

            img.akengage-commenter-avatar {
              float: left;
              margin-right: 1em;
              max-height: 32px;
              max-width: 32px;
            }

            div.akengange-commenter-name {
              color: $grey;
              font-size: 110%;
              font-weight: bold;

              span.akengage-commenter-username {
                color: darken($green, 10%);
                font-family: Hack, "Fira Code Retina", Consolas, "SF Mono", "Courier New", Courier, monospace;
              }

              span.akengage-commenter-email {
                font-weight: normal;
                font-family: Hack, "Fira Code Retina", Consolas, "SF Mono", "Courier New", Courier, monospace;
                font-size: 93%;
              }

              span.akengage-commenter-ismoderator,
              span.akengage-commenter-isuser,
              span.akengage-commenter-isguest {
                padding-left: 1em;
              }

              span.akengage-commenter-ismoderator {
                color: $orange;
              }

              span.akengage-commenter-isguest {
                color: $red;
              }
            }

            span.akengage-comment-permalink > a {
              color: $grey;
              text-underline: none;
            }

            span.akengage-comment-actions {
              span.akengage-comment-edit,
              span.akengage-comment-delete,
              span.akengage-comment-mark-ham,
              span.akengage-comment-mark-spam,
              span.akengage-comment-mark-possiblespam,
              span.akengage-comment-publish_unpublish {
                display: block;
                float: right;
                position: relative;
                top: -.5em;
              }

              span.akengage-comment-delete,
              span.akengage-comment-mark-spam {
                button {
                  color: $red;

                  &:hover {
                    background-color: lighten($red, 40%);
                    border: 2px solid darken($red, 10%);
                    color: darken($red, 10%);
                  }
                }
              }

              span.akengage-comment-mark-ham {
                button {
                  color: darken($green, 20%);

                  &:hover {
                    background-color: lighten($green, 40%);
                    border: 2px solid darken($green, 10%);
                    color: darken($green, 10%);
                  }
                }
              }

              span.akengage-comment-mark-possiblespam {
                button {
                  color: darken($orange, 20%);

                  &:hover {
                    background-color: lighten($orange, 30%);
                    border: 2px solid darken($orange, 10%);
                    color: darken($orange, 10%);
                  }
                }
              }
            }

            span.akengage-comment-publish-type {
              display: block;
              font-weight: bold;
            }
          }

          &[class*=--unpublished] {
            background-color: lighten($orange, 36%);
            border-left: 4px solid $orange;

            footer.akengage-comment-properties {
              background-color: lighten($orange, 30%);
              margin-bottom: .25em;
            }
          }

          &[class*=--spam] {
            background-color: lighten($red, 44%);
            border-left: 4px solid $red;

            footer.akengage-comment-properties {
              background-color: lighten($red, 40%);
              margin-bottom: .25em;
            }
          }

          div.akengage-comment-reply {
            & > button {
              border: thin solid $light-grey;
              font-size: 115%;
              padding: .25em .5em;

              &:hover {
                background-color: lighten($light-grey, 3%);
                border-color: $grey;
                color: $grey;
              }
            }
          }
        }
      }
    }
  }

  div#akengage-comment-form {
    border-top: thin solid $grey;
    margin: 1em 0;
    padding: 1em;

    h4 {
      color: darken($teal, 10%);
      font-size: 120%;
    }

    div#akengage-comment-inreplyto-wrapper {
      background-color: lighten($teal, 45%);
      border: 1px solid $teal;
      border-radius: .5em;
      color: $black;
      display: none;
      padding: .5em 1em;

      span#akengage-comment-inreplyto-name {
        font-weight: bold;
      }

      button#akengage-comment-inreplyto-cancel {
        background-color: lighten($light-grey, 10%);
        border: thin solid $red;
        color: $red;
        font-weight: bold;
        margin-left: 1em;
        padding: .25em .5em;
        vertical-align: baseline;

        &:hover {
          background-color: lighten($red, 43%);
          border: thin solid darken($red, 10%);
          color: darken($red, 10%);
        }
      }
    }

    div.akengage-comment-captcha-wrapper,
    div.akengage-comment-captcha-clear {
      clear: both;
    }
  }
}

// Small screens
@media only screen and (max-width: 600px) {
  span.akengage-comment-actions {
    display: block;
    padding: .25em 0;

    span.akengage-comment-actions {
      span.akengage-comment-edit,
      span.akengage-comment-delete,
      span.akengage-comment-publish_unpublish {
        display: inline-block;
        float: none;
      }
    }
  }

  span.akengage-comment-ip {
    clear: both;
    display: block;
  }
}