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

@import "variables";

h3.akengage-title {
  border-color: $light-grey;
}

a {
  color: $teal;
}

div.akengage-list-container {
  ol.akengage-comment-list {
    button {

    }

    li.akengage-comment-item {
      article[class^=akengage-comment] {
        footer.akengage-comment-properties {
          background-color: darken($grey, 10%);

          div.akengange-commenter-name {
            color: $light-grey;

            span.akengage-commenter-username {
              color: $green;
            }
          }

          span.akengage-comment-permalink > a {
            color: $light-grey;
          }

          span.akengage-comment-actions {
            span.akengage-comment-delete,
            span.akengage-comment-mark-spam {
              button {
                color: lighten($red, 10%)
              }
            }

            span.akengage-comment-mark-ham {
              button {
                color: $green;
              }
            }

            span.akengage-comment-mark-possiblespam {
              button {
                color: $orange;
              }
            }

          }

        }

        &[class*=--unpublished] {
          background-color: darken($orange, 48%);
          border-color: $orange;

          footer.akengage-comment-properties {
            background-color: darken($orange, 55%);
          }
        }

        &[class*=--spam] {
          background-color: darken($red, 44%);
          border-color: $red;

          footer.akengage-comment-properties {
            background-color: darken($red, 50%);
          }
        }
      }
    }
  }
}

div.akengage-pagination-pages {

  a, span.active {
    color: lighten($teal, 20%) !important;
  }

  span.active {
    color: $light-grey;
  }
}

div#akengage-comment-form {
  border-color: $light-grey;

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

  div#akengage-comment-inreplyto-wrapper {
    background-color: darken($teal, 20%);
    border-color: $teal;
    color: $light-grey;

    button#akengage-comment-inreplyto-cancel {
      background-color: darken($red, 30%);
      border-color: lighten($red, 20%);
      color: $light-grey;
    }
  }
}