/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

#single-post-header {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("./images/tall-trees.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#single-post-header .navbar {
  background-color: var(--color-primary);
}

.image-container {
  border-radius: 50%;
}

.container .post-author {
  color: var(--color-secondary);
  font-style: italic;
}

main h1 {
  color: var(--color-primary);
}

.comments-container {
  color: var(--color-black);
  scroll-margin-bottom: 4rem;
}

.comment {
  -webkit-box-shadow: 0 2px 8px 2px rgba(138, 138, 138, 0.6);
  box-shadow: 0 2px 8px 2px rgba(138, 138, 138, 0.6);
}

.comment .comment__user {
  color: var(--color-primary);
}

.comment .comment__user .comment__user--date {
  font-size: 0.8rem;
  font-style: italic;
}

.comment .comment__buttons {
  gap: 0.8rem;
}

.comment .comment__buttons .comment__buttons--delete,
.comment .comment__buttons .comment__buttons--edit {
  min-width: 6rem;
}

.comment .comment__buttons .comment__buttons--delete {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.comment .comment__buttons .comment__buttons--edit {
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
}

.comment .comment__buttons .comment__buttons--delete:active,
.comment .comment__buttons .comment__buttons--delete:hover {
  background-color: var(--color-secondary-light);
}

.comment .comment__buttons .comment__buttons--edit:active,
.comment .comment__buttons .comment__buttons--edit:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

#comments-section .container {
  color: var(--color-primary);
}

#comments-section form label {
  color: var(--color-primary);
}

#comments-section form textarea {
  resize: none;
}

#comments-section form .comment-submit-btn {
  background-color: var(--color-secondary);
  border: none;
}

#comments-section form .comment-submit-btn:hover,
#comments-section form .comment-submit-btn:active {
  background-color: var(--color-secondary-light);
}

#comments-section .text-area-placeholder {
  color: var(--color-primary);
}

/* ==================================== */
/* Edit Comment Modal */
/* ==================================== */
#edit-comment-modal label {
  color: var(--color-primary);
}

#edit-comment-modal textarea {
  resize: none;
}

#edit-comment-modal .cancel-edit-btn {
  background-color: var(--color-red);
  border: none;
}

#edit-comment-modal .cancel-edit-btn:active,
#edit-comment-modal .cancel-edit-btn:hover {
  background-color: var(--color-red-light);
}

#edit-comment-modal .save-edit-btn {
  background-color: var(--color-secondary);
  border: none;
}

#edit-comment-modal .save-edit-btn:active,
#edit-comment-modal .save-edit-btn:hover {
  background-color: var(--color-secondary-light);
}

.edit-comment-error {
  color: var(--color-red);
}

/* ============================= */
/* Comment Toasts */
/* ============================= */
#comment-toast-add,
#comment-toast-action {
  background-color: var(--color-secondary);
}

/* ============================== */
/* Media Queries */
/* ============================== */
@media only screen and (max-width: 576px) {
  .comment .comment__buttons .comment__buttons--delete,
  .comment .comment__buttons .comment__buttons--edit {
    min-width: 50%;
  }
}
