.comments {
  margin: 48px 0;
}

.comment-netiquette {
  font-size: $smaller-font-size;
}

.comments-list {
  margin-top: 24px;
}

.comments-nav {
  align-items: center;
  display: flex;
  flex-direction: row;
  font-size: $smaller-font-size;
  justify-content: center;
  margin: 16px 0;
  .page-numbers {
    border: solid 1px $ocean_green;
    color: $shark;
    height: 40px;
    line-height: 40px;
    margin-right: 8px;
    padding: 0 8px;
    &:hover {
      border: solid 1px $tree_poppy;
      color: $tree_poppy;
      font-weight: bold;
    }
  }
  .current {
    color: $ocean_green;
    &:hover {
      border: solid 1px $ocean_green;
      color: $ocean_green;
    }
  }
}

.list-comments {
  list-style: none;
  margin: 0;
  padding: 0;
  .children {
    list-style: none;
    margin: 24px 0 0 0;
    padding: 0;
    li {
      margin-bottom: 24px;
    }
  }
  li {
    margin-bottom: 24px;
    .comment-meta {
      font-size: $smaller-font-size;
    }
  }
}

.bypostauthor {
  background: $pewter;
}

#respond {
  .comment-notes {
    font-size: $smaller-font-size;
  }
  label {
    display: block;
  }
  #comment {
    border: 1px solid $ocean_green;
    height: 260px;
    overflow: auto;
    padding: 2px;
    resize: vertical;
    width: calc(100% - 6px);
  }
  #author,
  #email,
  #url {
    border: 1px solid $ocean_green;
    max-width: 480px;
    padding: 4px 2px;
    width: calc(100% - 6px);
  }
  #comment,
  #author,
  #email,
  #url {
    &:active,
    &:focus {
      border: 1px solid $cerulean;
    }
  }
  .error {
    color: $red;
  }
  #comment,
  #author,
  #email,
  #url {
    &.error {
      border: 1px solid $red;
      color: $red;
    }
  }
  .form-submit {
    text-align: center;
  }
  #submit {
    background: $lightning_yellow;
    margin-top: 24px;
    max-width: 280px;
    padding: 8px 4px;
    width: calc(100% - 12px);
    &:hover {
      background: $tree_poppy;
    }
  }
}