/**
 * MW Voortgang Plugin - Frontend Styles
 * 
 * Public-facing styles for the frontend display of voortgang functionality
 * Renamed from mw-voortgang.css to follow frontend/backend naming convention
 */

.article-list
{
  --checklist-gap: 48px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
  gap: var( --checklist-gap );
}

.article-list > .article-items
{
  flex: 0 0 30%;
  max-width: 30%;
}

.article-list > .article-contents
{
  flex: 0 0 calc( 70% - var( --checklist-gap ) );
  max-width: calc( 70% - var( --checklist-gap ) );
}

/* 
The ol containing articles links 
- background is the task color defined in the backend
- item colors are overlayed on top so can play with opacity to make them lighter/darker
- an item that is done has a lighter background
- an item that is active has a transparent background so it shows the full task color
- inactive items have a normal gray background color
- we use a counter to number the items instead of using list-style, this gives more control over the styling
*/
.article-items ol
{
  list-style: none;
  padding: 0;
  counter-reset: voortgang;
  background-color: var( --article-color );
}

li.article-item
{
  display: block;
  background-color: silver;
  cursor: pointer;
  counter-increment: voortgang;
  position: relative;
  padding: 24px;
  padding-left: 60px;
}

/* Numbers are in a pseudo element so we can style them more easily */
li.article-item:before
{
  content: counter( voortgang );
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  margin: 0 .3em;
  background-color: black;
  color: white;
  border-radius: 100%;  
}

li.article-item:hover
{
  background-color: #cccccc77
}

li.article-item.done
{
  background-color: #cccccc77
}

li.article-item.active
{
  background-color: transparent;
}

.article-contents .article-content
{
  display: none;
}

.article-contents .article-content > *,
.article-contents .article-content img
{
  max-width: 100%;
}

.article-contents .article-content img
{
  height: auto;
}

.article-contents .article-content.active 
{
  display: block;
}


.mw-checklist-items
{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mw-checklist-items label
{
  font-size: 1em;
  font-weight: normal;
}

.mw-checklist-done-text,
.mw-checklist-done-modal
{
  display: none;
  pointer-events: none;
}

.mw-checklist-done-text.all-done
{
  display: block;
}

body.mw-checklist-all-done .mw-checklist-done-modal
{
  pointer-events: all;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 9999;
}