/*
 * Comment Form Block
 * Styling for Gutenberg Post Comments Form block.
 */

#commentform {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#commentform .comment-notes,
#commentform .comment-form-rating,
#commentform .comment-form-comment,
#commentform .comment-form-url,
#commentform .comment-form-cookies-consent,
#commentform .form-submit {
  flex: 0 0 100%;
  width: 100%;
}

#commentform .comment-form-author,
#commentform .comment-form-email {
  flex: 0 0 48%;
  margin-bottom: 15px;
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

@media (max-width: 600px) {
  #commentform .comment-form-author,
  #commentform .comment-form-email {
    flex: 0 0 100%;
  }
}

p.comment-form-comment textarea,
p.comment-form-author input,
p.comment-form-email input,
p.comment-form-url input {
  padding: 8px;
  border-width: 1px;
  border-color: rgba(168, 168, 168, 0.5);
  border-radius: 5px;
}

p.form-submit.wp-block-button input#submit {
  border-radius: 5px;
}

.form-submit.wp-block-button input#submit {
  background-color: var(--wp--preset--color--button);
  border-radius: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

textarea#comment,
input#author,
input#email,
input#url {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}