/**
 *  Ephemeral checkists for PmWiki
 *  Written by (2022) Petko Yotov www.pmwiki.org/petko
 *
 *  This text is written for PmWiki; you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published
 *  by the Free Software Foundation; either version 3 of the License, or
 *  (at your option) any later version. See pmwiki.php for full details
 *  and lack of warranty.
 *
 *  Copyright 2022 Petko Yotov pmwiki.org/petko
 */

:root {
  --color-done: #888;
  --color-fill: #bbb;
}

.pmchecklist li {
  list-style-type: none;
  margin: .3em 0;
}
.pmchecklistdemo {
  margin-right: 1em !important;
  border: 1.5px inset #0af;
  border-radius: 3px;
  padding: 0 .5em !important;
}

.pmchecklistdemo li {
  margin: .3em 0;  
}

.pmchecklist li[data-done] {
  list-style-type: none;
  padding-left: 1.1em;
}

.pmchecklist > li[data-done]:before {
  box-sizing: border-box;
  content: ' ';
  display: inline-block;
  width: .8em;
  height: .8em;
  border: 2px solid var(--text-color);
  margin-left: -1.1em;
  margin-right: .3em;
}

.pmchecklist > li[data-done="2"]:before {
  background-color: var(--color-fill);
}

.pmchecklist > li[data-done="1"]:before {
  background: linear-gradient( 135deg, var(--orangered), var(--orangered) 50%, transparent 50%, transparent );
}


.pmchecklist .pmcheckall,
.pmchecklist > li[data-done]  {
  cursor: pointer;
}

.pmchecklist li:not(.hlt) {
  transition: background-color 1s ease;
}
.pmchecklist li.hlt {
  background-color: var(--highlight);
}

.pmchecklist li[data-done="2"] {
  color: var(--color-done);
  text-decoration: line-through;
}

.pmchecklist li[data-done="1"] {
  color: var(--orangered);
}

.pmchecklist li[data-done="1"]:after {
  content: ' [started]';
}

.pmcheckall,
.pmchecklist li.done-separator {
  position: relative;
  color: var(--link-color);
}

.pmchecklist li.done-separator .sep2 {
  display: inline-block;
  position: relative;
  bottom: 0.3em;
  border-bottom: 1.5px solid var(--link-color);
  width: calc(100% - 4em);
  margin-left: .2em;
}

.pmchecklist li.done-separator:last-child {
  display: none;
}

.pmchecklist, .pmchecklist * {
  box-sizing: border-box;
}
.pmchecklist {
  padding-left: 0px;
}


.pmchecklist li.done-separator:before {
  content: "Done";
  background-color: var(--bgcolor);
  padding-right: .2em;
}


.pmchecklist li.done-separator {
  --linepos: 55%;
  background: linear-gradient(
    transparent var(--linepos), 
    var(--link-color) var(--linepos) calc(var(--linepos) + 1px), 
    transparent calc(var(--linepos) + 1px) 
  );
}