/* 
    Created on : Feb 11, 2025, 8:22:05 PM
    Author     : nigjo
*/
body{
  margin:1vw;
}
nav {
  margin:2mm;
  display:flex;
  gap:.5em;
  align-items: flex-start;
  button {
    border:none;
    border-radius:.25em;
    padding:1mm 2mm;
    white-space: nowrap;
    /*! height:2em; */
    /*! display: block; */
    &:hover {
      background-color:darkblue !important;
      color:aliceblue;
      cursor:pointer;
    }
    &[data-active] {
      background-color:lightblue;
    }
  }
  &.local {
    >:not([data-id]):not(.withmenu) {
      cursor: initial;
      pointer-events:none;
      color:silver;
    }
    .withmenu button:not([data-id]) {
      cursor: initial;
      pointer-events:none;
      color:silver;
    }
  }
  .withmenu {
    position: relative;
    display:flex;
    gap:.5em;
    flex-direction: column;
    max-height: calc(1.5rem + 2mm);
    overflow: hidden;
    >div {
      position: absolute;
      top: 100%;
      left: 0;
      display:none;
      gap:.5em;
      flex-direction: column;
      background-color: white !important;
    }
    >button:not(:first-child) {
      display:none;
    }
    &:hover {
      z-index:10;
      overflow: initial;
      >div {
        padding-top:.5em;
        display:flex;
      }
    }
    &[data-active] >button:first-child {
      background-color:lightblue;
    }
  }
}
main {
  position: relative;
}
dialog {
  top: 2rem;
  width: calc(var(--page-height) - 4rem);
  height: calc(var(--page-width) - 4rem);
  box-sizing: border-box;
  left: 2rem;
  margin: 0;
  textarea {
    width:100%;
    height:calc(var(--page-width) - 9rem);
  }
}
.noview {
  display:none;
}
.selector {
  &:before {
    content:'\2610\00A0';
  }
  &.radio:before {
    content:'\25CE\00A0';
  }
}
body:has(#sizeA4:checked){
  --page-width:210mm;
  --page-height:297mm;
}
#sizeA4:checked {
  ~#options .selector[for=sizeA4] {
    color:blue;
    &:before {
      content:'\25C9\00A0';
    }
  }
}
body:has(#sizeLetter:checked) {
  --page-width:8.5in;
  --page-height:11in;
}
#sizeLetter:checked {
  ~#options .selector[for=sizeLetter] {
    color:blue;
    &:before {
      content:'\25C9\00A0';
    }
  }
}
#printview:checked {
  ~#options .selector[for=printview] {
    color:blue;
    &:before {
      content:'\25C9\00A0';
    }
  }
}
#rotate:checked {
  @media screen {
    ~main #zine {
      transform:rotate(180deg);
      transform-origin:center;
    }
  }
  ~#options .selector[for=rotate] {
    color:blue;
    &:before {
      content:'\25C9\00A0';
    }
  }
}
body:has(#line:checked) {
  --column-bg:linear-gradient(90deg,white 0%, silver 50%, white 100%);
}
#line:checked {
  @media screen {
    ~main #zine {
      transform: none;
      height: initial;
      max-width: 100%;
      background:var(--column-bg);
      #zinecontent {
        display:flex;
        flex-direction: column;
        align-items: center;
        .page {
          --half-border:calc(var(--border) / 2);
          position:relative;
          transform:none;
          top: 0px;
          left: 0px;
          height: initial;
          border: none;
          border-left: medium solid lightgray;
          padding-top: var(--half-border);
          padding-bottom: var(--half-border);
          &:has(.content:empty),.footer {
            display:none;
          }
          &:after{
            border-top-width: var(--half-border);
            border-bottom-width: var(--half-border);
          }
        }
      }
    }
    ~#options .selector[for=line] {
      color:blue;
      &:before {
        content:'\25C9\00A0';
      }
    }
  }
}
#borderless:checked {
  ~main #zine .page {
    --border:0mm;
  }
  ~#options .selector[for=borderless] {
    color:blue;
    &:before {
      content:'\2612\00A0';
    }
  }
}
#ordered:checked {
  @media screen {
    ~main #zine {
      display:block;
      transform:none;
      width:calc(var(--page-height) + 2rem + 1px);
      #zinecontent {
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        .page {
          position:relative;
          top:initial;
          left:initial;
          transform:none;
          min-width:calc(var(--page-height) / 4);
          margin-bottom:1rem;
        }
        .page1 {
          margin-left:calc(var(--page-height) / 4);
        }
        .page1,
        .page3,
        .page5,
        .page7 {
          margin-right:1rem;
        }
      }
      height: initial;
    }
  }
  ~#options {
    .selector[for=ordered] {
      color:blue;
      &:before {
        content:'\25C9\00A0';
      }
    }
  }
}
#showborder:checked {
  @media screen {
    ~main #zine {
      .page:after {
        position: absolute;
        content:' ';
        border:var(--border) solid rgba(0,0,0,.05);
        width:100%;
        height:100%;
        top:0px;
        box-sizing:border-box;
        left: 0px;
      }
    }
  }
  ~#options .selector[for=showborder] {
    color:blue;
    &:before {
      content:'\2612\00A0';
    }
  }
}
#zine {
  position:relative;
  width:var(--page-height);
  height:var(--page-width);
  box-sizing:content-box;
  #zinecontent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
  }
}
.page {
  --border:5mm;
  border:1px dotted #CCCCCC;
  background-color:ghostwhite;
  height:calc(var(--page-width) / 2);
  width:calc(var(--page-height) / 4);
  justify-content:space-around;
  position:relative;
  box-sizing:border-box;
  padding:var(--border);
  overflow:hidden;
  .content {
    height: 100%;
    p {
      margin:2mm 0px;
    }
    img {
      max-width: 100%;
      max-height: calc(var(--page-width) / 2 - 2 * var(--border));
      &.width200 {
        max-width: 200%;
      }
      &.width75 {
        max-width: 75%;
      }
      &.width66 {
        max-width: 66%;
      }
      &.width50 {
        max-width: 50%;
      }
      &.width33 {
        max-width: 33%;
      }
      &.width25 {
        max-width: 25%;
      }
      &.heightOrg {
        max-height: initial;
      }
      &.height25 {
        max-height: calc(var(--page-width) / 2 * .25);
      }
      &.height33 {
        max-height: calc(var(--page-width) / 2 * .33);
      }
      &.height50 {
        max-height: calc(var(--page-width) / 2 * .50);
      }
      &.height66 {
        max-height: calc(var(--page-width) / 2 * .66);
      }
      &.height75 {
        max-height: calc(var(--page-width) / 2 * .75);
      }
    }
    p:has(img.center) {
      text-align: center;
    }
    p:has(img.fullSize) {
      img {
        object-fit: cover;
        height: calc(var(--page-width) / 2 - 2 * var(--border));
        width:calc(var(--page-height) / 4 - 2 * var(--border));
      }
      position:absolute !important;
      top:var(--border);
      left:var(--border);
      z-index:2;
    }
  }
  .footer {
    position: absolute;
    color:silver;
    bottom:0cm;
    text-align: center;
    width:calc(100% - 2 * var(--border));
    font-size: .75rem !important;
    height: 1rem;
  }
  *:first-child {
    margin-top:0px !important;
  }
  /* Grid-Positionierung für die 8 Seiten im 4x2 Layout */
  &.page1 {
    grid-area: 1 / 1;
    transform:rotate(180deg);
  }
  &.page2 {
    grid-area: 2 / 1;
  }
  &.page3 {
    grid-area: 2 / 2;
  }
  &.page4 {
    grid-area: 2 / 3;
  }
  &.page5 {
    grid-area: 2 / 4;
  }
  &.page6 {
    grid-area: 1 / 4;
    transform:rotate(180deg);
  }
  &.page7 {
    grid-area: 1 / 3;
    transform:rotate(180deg);
  }
  &.page8 {
    grid-area: 1 / 2;
    transform:rotate(180deg);
  }
}
#files {
  padding:1em;
  box-sizing: border-box;
  .filelist {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;
    figure {
      border:1px solid black;
      width:10em;
      min-height:10em;
      margin: 1em;
      button {
        border:none;
        font-size: 1.5em;
      }
      * {
        max-width:100%;
      }
    }
    figcaption {
      font-family: monospace;
      font-size: .8em;
    }
  }
}
body.dragging {
  overflow: hidden;
  * {
    pointer-events: none;
  }
  #files {
    pointer-events: all;
    position:fixed;
    overflow: auto;
    z-index: 100;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,.9);
  }
}
@media print {
  @page {
    size: landscape;
    margin: 0mm;
  }
  body {
    margin:0mm;
    padding:0mm;
    box-sizing:border-box;
    --page-width:100vh;
    --page-height:100vw;
  }
  #zine{
    background:initial;
  }
  .page {
    background-color: initial;
    border:none;
  }
  .noprint {
    display:none;
  }
}