/* =========================================================================
   chrille.nu - Kommentarsfältet (wpDiscuz)

   Filen hette wpDiscuz-dark.css och var skriven för den mörka sajten. När
   artiklarna började följa områdets ljushet blev den fel: grått på nästan
   vitt, och nästan svart på huvudbokens gröna. Uppmätt så lågt som 1,18.

   Nu läser den områdesslottarna istället, så kommentarerna följer artikeln
   de hänger under. wpDiscuz sätter det mesta med id-selektorer (#wpdcom),
   vilket är specificitet 1-1-0, så regler här behöver samma id-prefix för
   att gälla.
   ========================================================================= */

#wpdcom,
#wpdcom .wpd-thread-wrapper,
#wpdcom .wpd-comment-wrap {
  background: transparent;
  color: var(--u-text);
  font-family: var(--f-sans);
}

#wpdcom .wpd-comment-wrap {
  border-bottom: 1px solid var(--u-line);
  border-radius: 0;
  padding: var(--s-5) 0;
}

/* --- Texten -------------------------------------------------------------- */
#wpdcom .wpd-comment-text,
#wpdcom .wpd-comment-text p,
#wpdcom .wc-comment-right .wpd-comment-text p {
  color: var(--u-text);
  font: 400 16px/1.7 var(--f-sans);
}

#wpdcom .wpd-comment-author,
#wpdcom .wpd-comment-author a,
#wpdcom .wc-comment-right .wc-comment-author {
  color: var(--u-accent);
  font: 600 15px/1.3 var(--f-sans);
}

#wpdcom .wpd-comment-date,
#wpdcom .wc-comment-right .wc-comment-date,
#wpdcom .wpd-comment-info,
#wpdcom .wpd-sort-button,
#wpdcom .wpdiscuz-sort-buttons,
#wpdcom .wpd-thread-info {
  color: var(--u-text-dim);
  font: var(--t-label);
  letter-spacing: .06em;
}

#wpdcom .wpd-thread-head,
#wpdcom .wc-comments-title,
#wpdcom .wpd-thread-filter {
  color: var(--u-text);
  border-bottom: 1px solid var(--u-line);
}

/* --- Formuläret ---------------------------------------------------------- */
#wpdcom .wc-comment-form textarea,
#wpdcom .wpd-form textarea,
#wpdcom .wpd-field-input textarea,
#wpdcom .wpd-form input[type="text"],
#wpdcom .wpd-form input[type="email"],
#wpdcom .wpd-form input[type="url"] {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--radius-sm);
  color: var(--u-text);
  font: 400 15px/1.6 var(--f-sans);
}
#wpdcom .wc-comment-form textarea:focus,
#wpdcom .wpd-form textarea:focus,
#wpdcom .wpd-form input:focus {
  outline: 2px solid var(--u-accent);
  outline-offset: 1px;
  border-color: var(--u-accent);
}
#wpdcom .wpd-form textarea::placeholder,
#wpdcom .wpd-form input::placeholder {
  color: var(--u-text-dim);
}

#wpdcom input[type="submit"],
#wpdcom .wc_comm_submit,
#wpdcom .wpd-form-button {
  background: var(--u-accent);
  border: 1px solid var(--u-accent);
  border-radius: var(--radius-sm);
  color: var(--u-bg);
  font: 600 15px/1 var(--f-sans);
  min-height: 44px;
  padding: 0 var(--s-5);
  cursor: pointer;
}
#wpdcom input[type="submit"]:hover,
#wpdcom .wc_comm_submit:hover,
#wpdcom .wpd-form-button:hover {
  opacity: .88;
}

/* --- Knappar och röstning ------------------------------------------------ */
#wpdcom .wc-reply-button,
#wpdcom .wpd-reply-button,
#wpdcom .wpd-tool-item {
  color: var(--u-accent);
  font: 600 13px/1 var(--f-sans);
}
#wpdcom .wc-reply-button:hover,
#wpdcom .wpd-reply-button:hover {
  color: var(--u-text);
}

#wpdcom .wpd-vote-up,
#wpdcom .wpd-vote-down,
#wpdcom .wpd-vote-result {
  color: var(--u-text-dim);
}
#wpdcom .wpd-vote-up:hover,
#wpdcom .wpd-vote-down:hover {
  color: var(--u-accent);
}

/* Bubblan i hörnet ärver annars en grön botten med mörk text. */
#wpd-bubble-wrapper > div,
#wpd-bubble-wrapper #wpd-bubble-count {
  background: var(--c-green-100);
  color: var(--c-ink-800);
}


/* =========================================================================
   wpDiscuz faktiska klassnamn

   De ovanstående reglerna byggde på gissade klassnamn. Det här är de som
   pluginet verkligen använder, avlästa ur DOM. wpDiscuz sätter dem i grått
   runt 2,85 till 4,48 mot 1 på ljus botten.
   ========================================================================= */
#wpdcom .wpdiscuz-sort-button,
#wpdcom .wpd-filter,
#wpdcom .wpdf-sorting span {
  color: var(--u-text-dim);
}
#wpdcom .wpdiscuz-sort-button:hover { color: var(--u-accent); }

#wpdcom .wpd-reply-button,
#wpdcom .wpd-reply-button span,
#wpdcom .wpd-view-replies,
#wpdcom .wpd-view-replies span,
#wpdcom .wpd-view-replies-text {
  color: var(--u-accent);
}
#wpdcom .wpd-reply-button:hover span,
#wpdcom .wpd-view-replies:hover span {
  color: var(--u-text);
}

/* Färgen ärvs från trådens rot. Sätts den där följer allt inuti med, utan
   att varje enskild knapp behöver en egen regel. */
#wpdcom,
#wpdcom .wpd-thread-head,
#wpdcom .wpd-thread-filter,
#wpdcom .wpd-filter {
  color: var(--u-text);
}
#wpdcom .wpd-filter,
#wpdcom .wpdiscuz-sort-button {
  color: var(--u-text-dim);
}
#wpdcom .wpdiscuz-sort-button:hover,
#wpdcom .wpdiscuz-sort-button.wpdiscuz-sort-button-active {
  color: var(--u-accent);
}