/*
 * SPDX-FileCopyrightText: 2022 Pepijn de Vos
 *
 * SPDX-License-Identifier: MPL-2.0
 */

body, html {
    padding: 0;
    margin: 0;
}

#mosaic_editor, #mosaic_libman {
    font: 400 16px/18px 'Roboto', sans-serif;
    color: #222222A5;
}

input, textarea {
    background: #00000008 0% 0% no-repeat padding-box;
    border: 2px solid #2222220D;
    border-radius: 5px;
    padding: 5px 10px;
}
/* library manager */

#mosaic_libman h1 {
    font: 500 25px/25px 'Roboto', sans-serif;
    letter-spacing: 0.85px;
    color: #222222;
    text-transform: uppercase;
}

#mosaic_libman h2 {
    font: 500 25px/25px 'Roboto', sans-serif;
    letter-spacing: 0.72px;
    color: #222222;
}

#mosaic_libman h3 {
    font: 500 20px/25px 'Roboto', sans-serif;
    letter-spacing: 0.72px;
    color: #222222;
}

#mosaic_libman button.plus {
    font: 500 25px/25px 'Roboto', sans-serif;
    letter-spacing: 0.85px;
    color: #222222;
    text-transform: uppercase;
    padding: 5px 12px;
}

#mosaic_libman .libhead {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
}

#mosaic_libman .addbuttons {
    display: flex;
    flex-direction: row;
    justify-content: right;
    gap: 20px;
    padding: 20px 20px;
    border-bottom: 1px solid #e7e7e7;
}

#mosaic_libman .schsel h2 {
    padding: 0 20px;
}

#mosaic_libman .schsel .schematics {
    padding: 0 20px;
}


#mosaic_libman button,
#mosaic_libman input[type=submit],
#mosaic_libman .buttongroup {
    background: #f8f8f8 0% 0% no-repeat padding-box;
    box-shadow: 0px 1px 4px #00000033;
    border-radius: 7px;
    border: none;
    padding: 10px 15px;
}

#mosaic_libman button:active {
    box-shadow: 0px 0px 4px hsla(0, 0%, 0%, 0.2);
}
#mosaic_libman button.primary,
#mosaic_libman input[type=submit],
#mosaic_libman .buttongroup.primary {
    background-color: #0E1A32;
    color: white;
}
#mosaic_libman .buttongroup.primary > button,
#mosaic_libman .buttongroup summary::after {
    color: white;
    border-color: white;
}
#mosaic_libman .buttongroup.primary > button:disabled {
    color: grey;
}

#mosaic_libman .buttongroup {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    position: relative;
}

#mosaic_libman .buttongroup summary {
    padding: 10px 15px;
    border-left: 1px solid rgb(224, 224, 224);
}

#mosaic_libman .buttongroup summary::after {
    transform: rotate(45deg);
    top:-5px;
    left:0px;
}

#mosaic_libman .buttongroup details > button {
    position: absolute;
    left: 0;
    bottom: -100%;
    width: 100%;
}

#mosaic_libman .buttongroup > button {
    background: none;
    box-shadow: none;
}

#mosaic_libman .libraries {
    grid-area: libraries;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e7e7e7;
    overflow: hidden;
}
#mosaic_libman .libraries > *{
    padding: 1em;
}
#mosaic_libman .libraries .dbsel {
    flex-grow: 1;
}
#mosaic_libman .schematics {
    grid-area: schematics;
    display: flex;
    flex-direction: column;
}
#mosaic_libman .cellsel {
    flex-grow: 1;
    overflow: auto;
}
#mosaic_libman .cellsel details {
    margin-bottom: 1em;
}

#mosaic_libman .dbprops {
    padding-top: 0;
    background-color: #00000007;
}

#mosaic_libman .proppane {
  grid-area: properties;
  border-left: 1px solid #e7e7e7;
  padding: 20px;
}

#mosaic_libman .properties {
    display: grid;
    grid-template-columns: [labels] auto [controls] auto;
    grid-auto-flow: row;
    row-gap: 1em;
    align-items: center;
}

#mosaic_libman .properties label {
  grid-column: labels;
  grid-row: auto;
}

#mosaic_libman .properties input {
    grid-column: controls;
    grid-row: auto;
    box-sizing: border-box;
    width: 100%;
}

#mosaic_libman input[type=radio] {
    display: none;
}
#mosaic_libman input[type=radio] + label {
    display: block;
    padding: 10px 15px;
    margin: 5px 0 0 5px;
}
#mosaic_libman input[type=radio]:checked + label {
    background-color: rgba(0, 0, 0, 0.041);
    border-radius: 7px;
}

#mosaic_libman details .detailbody {
    max-height: 0px;
    transition: max-height 1s;
    overflow: hidden;
}
#mosaic_libman details[open] .detailbody {
    max-height: 10000px;
}
#mosaic_libman details summary {
    list-style-type: none;
}
#mosaic_libman .libraries details summary {
    padding: 10px 15px;
    border-radius: 7px;
}
#mosaic_libman details[open] summary {
    background: #0E1A32 0% 0% no-repeat padding-box;
    color:white;
}

#mosaic_libman details summary::after {
    content: "";
    border: solid black;
    border-width: 0 1px 1px 0;
    padding: 3px;
    transform: rotate(-45deg);
    float: right;
    position: relative;
    top:4px;
    left:-4px;
    transition: transform 100ms;
}
#mosaic_libman details[open] summary::after {
    transform: rotate(45deg);
    border: solid white;
    border-width: 0 1px 1px 0;
}

#mosaic_libman {
    display: grid;
    grid-template-areas:
    'libraries schematics properties';
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 2fr 2fr;
}

#mosaic_libman .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    box-shadow: 0px 0px 10px #00000033;
    border-radius: 7px;
    border: 1px solid lightgray;
    padding: 20px 20px;

}
#mosaic_libman .modal.hidden {
    display: none;
}
#mosaic_libman .modal input[type=text] {
    display: block;
    margin: 1em 0;
}
#mosaic_libman .modal input[type=submit] {
    margin-left:1em;
}

/* editor */
#mosaic_editor * {
  margin: 0;
  padding: 0;
}

#mosaic_editor h1, #mosaic_editor h2, #mosaic_editor h3, #mosaic_editor h4, #mosaic_editor h5, #mosaic_editor h6 {
  font-size: 1.1em;
  margin: 0.5em 0;
}

#mosaic_editor, #mosaic_app, #mosaic_libman {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#mosaic_app {
  display: flex;
  flex-direction: column;
}

#mosaic_app .menu {
  grid-row: 1;
  background-color: white;
  box-shadow: 0px 0px 8px #00000008;
  border: 0.5px solid #7070701f;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: url(icons/Logo.svg);
  background-repeat: no-repeat;
  background-position: 15px 50%;
  padding-left: 65px;
}
#mosaic_app .menu .primary {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#mosaic_app .menu .secondary {
  display: flex;
  justify-content: flex-end;
}

#mosaic_app .content {
    position: relative;
    flex-grow: 1;
    flex-shrink: 5;
    overflow:hidden;
}

#mosaic_app .devicetray {
    position: absolute;
    top: 25px;
    left: 25px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 8px #00000008;
    border: 0.5px solid #7070701f;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    max-height: calc(100% - 50px);
    /* overflow-y: auto; */
    /* overflow-x: visible; */
    max-width: 5em;
    box-sizing: border-box;
    user-select: none;
}

#mosaic_app .sidebar {
    position: absolute;
    top: 25px;
    right: 25px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 8px #00000008;
    border: 0.5px solid #70707040;
    border-radius: 10px;
    width: 300px;
    max-height: calc(100% - 50px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}
#mosaic_app .sidebar h1 {
    background-color: #0E1A32;
    color: white;
    margin: 0;
    border-radius: 10px 10px 0 0;
    padding: 15px 20px;
    font: 500 18px/20px 'Roboto', sans-serif;
    letter-spacing: 0.70px;
}
#mosaic_app .sidebar .properties {
    padding: 20px;
}

#mosaic_app .chrome a,
#mosaic_app .chrome button,
#mosaic_app .chrome label {
  padding: 0.5em;
  margin: 0.75em 0.5em;
  background-color: white;
  box-shadow: 0px 0px 8px #0000001A;
  border-radius: 5px;
  width: 1em;
  height: 1em;
  color: #222222A5;
  border: none;
  box-sizing: content-box;
}

#mosaic_app .chrome svg {
  fill: #222222A5;
}

#mosaic_app .chrome span.sep {
  border-right: 1px solid lightgray;
  padding: 0;
  margin: 0.75em 0.5em;
}

#mosaic_app .chrome a:hover,
#mosaic_app .chrome button:hover {
    background-color: lightgray;
}
#mosaic_app .chrome a:active,
#mosaic_app .chrome a.active,
#mosaic_app .chrome button.active,
#mosaic_app .chrome input[type=radio]:checked + label {
  background-color: #0E1A32;
  color: white;
}
#mosaic_app .chrome a:active svg,
#mosaic_app .chrome a.active svg,
#mosaic_app .chrome button.active svg,
#mosaic_app .chrome input[type=radio]:checked + label svg {
  fill: white;
}

#mosaic_app .chrome input {
  display: none;
}

#mosaic_app .devicetray button {
    padding: 0.7em;
    width: 25px;
    height: 25px;
    display: inline-block;
}
#mosaic_app .devicetray svg {
    width: 25px;
    height: 25px;
}
#mosaic_app .devicetray details {
    position: relative;
}
#mosaic_app .devicetray summary {
    list-style-type: none;
}
#mosaic_app .devicetray summary::after {
    content: "";
    position: absolute;
    bottom:0.7em;
    right:0.7em;
    border-color: transparent;
    border-top-color: black;
    border-style: solid;
    border-width: 3px;
}
#mosaic_app .devicetray details .tray {
    position: absolute;
    top:0;
    left:120%;
    display: flex;
    flex-direction: row;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    /* box-shadow: 0px 0px 8px #00000008; */
    border: 0.5px solid #7070701f;
    border-radius: 5px;
    z-index: 0;
}
#mosaic_app .devicetray details .tray::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(50% - 10px);
    left: -10px;
    transform: rotate(45deg);
    width: 20px;
    height: 20px;
    background: white;
    border-left: 0.5px solid #7070701f;
    border-bottom: 0.5px solid #7070701f;
}

#mosaic_editor .properties {
  display: grid;
  grid-template-columns: [labels] auto [controls] 1fr;
  grid-auto-flow: row;
  grid-gap: .8em;
}
#mosaic_editor .properties label {
  grid-column: labels;
  grid-row: auto;
}

#mosaic_editor .properties input {
    grid-column: controls;
    grid-row: auto;
    box-sizing: border-box;
    width: 100%;
}

#mosaic_canvas {
  overflow: hidden;
}



#mosaic_editor svg {
  overflow: visible;
  stroke-linecap: round;
}

#mosaic_editor g.staging,
#mosaic_editor g.toolstaging {
    opacity: 0.5;
}

g.device {
  transform-box: view-box;
  transform-origin: center;
  user-select: none;
}

g.staging, g.toolstaging g.device {
    transition: all 70ms ease-out;
}

line.wirebb {
  stroke: transparent;
  transition: stroke 200ms;
  stroke-width: 25px;
  fill: none;
}
line.wirebb:hover {
  stroke: #00000008;
}

text.identifier {
    font-size: 0.7em;
}

rect.select {
    fill: #0000001A
}

/* tetris theme */

.tetris {
    background-color: #f9f9f9;
}

.tetris.pan {
    cursor: url(icons/arrows-move.svg) 6 0, grab;
}

.tetris.wire {
    cursor: url(icons/pencil.svg) 0 16, crosshair;
}

.tetris.probe {
    cursor: url(icons/search.svg) 5 5, crosshair;
}

.tetris.eraser .wire:hover,
.tetris.eraser .device {
    cursor: url(icons/eraser.svg) 6 14, crosshair;
}

.tetris line.grid {
  stroke: lightgray;
  stroke-width: 0.5px;
  fill: none;
}

.tetris rect.tetris {
  fill: rgb(238, 238, 238);
  stroke: rgb(238, 238, 238);
  stroke-width: calc(10px*0.8284271247461903); /* 2*rx*(sqrt(2)-1) */
  rx: 10px;
}

.tetris g.device.selected rect.tetris,
.tetris rect.tetris.selected {
  fill: rgb(229, 216, 243) !important;
  stroke: rgb(229, 216, 243) !important;
}

.tetris .port.selected polyline {
  fill: rgb(229, 216, 243) !important;
}

.tetris g.device.nmos rect.tetris,
.tetris g.device.npn rect.tetris {
  fill: rgb(216, 236, 243);
  stroke: rgb(216, 236, 243);
}

.tetris g.device.pmos rect.tetris,
.tetris g.device.pnp rect.tetris {
  fill: rgb(243, 231, 216);
  stroke: rgb(243, 231, 216);
}

.tetris g.device.capacitor rect.tetris,
.tetris g.device.inductor rect.tetris,
.tetris g.device.resistor rect.tetris,
.tetris g.device.diode rect.tetris {
  fill: rgb(216, 243, 226);
  stroke: rgb(216, 243, 226);
}

.tetris g.device.vsource rect.tetris,
.tetris g.device.isource rect.tetris {
  fill: rgb(243, 243, 216);
  stroke: rgb(243, 243, 216);
}

.tetris g.device.port polyline {
  fill: rgb(243, 243, 216);
}

.tetris circle.port {
  fill: rgb(145, 0, 0);
  stroke: rgb(53, 0, 0);
}

.tetris g.device circle.port {
  display: none;
}

.tetris g.device.selected circle.port {
  display: inherit;
}


.tetris g.device polyline,
.tetris g.device circle.outline,
.tetris g.device rect.outline,
.tetris g.device path {
  stroke: black;
  stroke-width: 2px;
  fill: none;
}

.tetris line.wire {
  stroke: black;
  stroke-width: 2px;
  fill: none;
}
.tetris circle.wire {
  fill: black;
}
.tetris g.wire.selected line.wire {
  stroke-dasharray: 10px 3px; /* this is not ideal */
}

.tetris circle.nc {
  fill: none;
  stroke: red;
  stroke-dasharray: 1 4;
}

/* eyesore theme */

.eyesore line.grid {
  stroke: lightgray;
  stroke-width: 1px;
  stroke-dasharray: 1 99999;
  stroke-linecap: butt;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.eyesore #mosaic_canvas {
  shape-rendering: crispEdges;
  background-color: black;
}

.eyesore rect.tetris {
  fill: transparent;
}

.eyesore circle.port {
  fill: red;
}

.eyesore circle.nc {
  fill: red;
}


.eyesore text {
  fill: red;
}

.eyesore g.device polyline,
.eyesore g.device path,
.eyesore g.device circle.outline,
.eyesore g.device rect.outline,
.eyesore g.device polygon {
  stroke: #00cc66;
  stroke-width: 1px;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.eyesore g.device.port polyline {
  fill: rgb(255, 0, 0);
  stroke: none;
}
.eyesore g.device.port circle.port {
    fill: none;
}
.eyesore g.device.port.supply polyline,
.eyesore g.device.port.ground polyline {
  stroke: #00cc66;
  fill: transparent;
}

.eyesore g.device text {
  stroke: #00cc66;
  /* stroke-width: 1px; */
  fill: #00cc66;
  vector-effect: non-scaling-stroke;
}

.eyesore line.wire {
  stroke: #39bfff;
  stroke-width: 1px;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.eyesore circle.wire {
  fill: #39bfff;
}