@charset "utf-8";

/* Canvas styles */

#ui {
  width: 1200px;
}

#canvas-overlay {
  z-index: 50;
}

.canvas-container canvas {
  position: absolute;
}

.canvas-container
{
  position:   relative;
  overflow:   scroll;
  border:     1px solid darkgray;
  min-height: 400px;
  max-height: 400px;
}

#image-main {
  position:  absolute;
  max-width: unset;
}

/* effects */

/* palette */

#palette-color-map {
  max-width:  830px;
  flex-basis: 100%;
  flex-wrap:  wrap;
  gap:        0px;
}

#palette-color-map > div.palette-block {
  gap:   0;
  width: 100%;
}

#color-mapper-selected-color {
  border:        1px gray solid;
  border-radius: 6px;
}

#color-mapper-ui {
  padding-top: 15px;
}

#color-mapper-mapped-colors {
  width:      100%;
  max-height: 200px;
  overflow-y: scroll;
}

.color-mapper-cell {
  position:      relative;
  padding:       5px;
  border:        1px solid gray;
  border-radius: 5px;
  -webkit-user-select:   none;
          user-select:   none;
  margin:        0 10px 5px 0; 
}

.color-mapper-small-button {
  position:    absolute;
  top:         2px;
  bottom:      2px;
  width:       46px;
  max-width:   46px;
  font-family: 'monospace';
  font-size:   11px;
  padding:     0;
}

.btn-active {
  background-color: yellowgreen;
  border-radius:    4px;
  border:           outset 2px #666;
}

.btn-primary {
  background-color: lightblue;
  border-radius:    4px;
  border:           solid 1px #666;
}

.btn-primary:hover {
  background-color: #0060df;
  color:            white;
/*  border-radius:    4px;
  border:           solid 1px #666;*/
}

.btn-warn:hover {
  background-color: #F93030;
  color:            white;
  border-radius:    4px;
  border:           solid 1px #666;
}

#color-mapper-palette {
  flex-grow:  0;
  width:      100%;
  overflow-y: scroll;
  height:     150px;
}

#color-mapper-palette > div.palette-block {
  flex-direction: column;
  gap:            5px;
  width:          100%;
}

#color-mapper-dialog {
  position:         absolute;
  background-color: rgba(211, 211, 211, 0.8);
  border:           1px solid darkgray;
  border-radius:    3px;
  z-index:          100;
  width:            350px;
}

#color-mapper-dialog-handle {
  height:           40px;
  background-color: whitesmoke;
}

#color-mapper-dialog-handle:hover {
  background-color: lightblue;
}

#color-mapper-dialog-body {
  padding: 5px;
}

#color-mapper-dialog .palette-cell {
  cursor:      pointer;
  flex-shrink: 0;
}

#preview-controls {
  justify-content: space-between;
}

#preview-controls input[type="number"] {
  width: 60px;
}

.palette-cell {
  flex-grow:       1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         3px 0px 3px 0px;
  font-size:       12px;
  font-family:     'monospace';
  -webkit-user-select:     none;
          user-select:     none;
  height:          40px;
}

.selected::before {
  content:       "=>";
  color:         white;
  font-family:   'monospace';
  display:       block;
  padding-right: 5px;
  font-size:     12px;
}

.selected::after {
  content:       "<=";
  color:         white;
  font-family:   'monospace';
  display:       block;
  padding-right: 5px;
  font-size:     12px;
}

.selected-dark::before {
  content:       "=>";
  color:         black;
  font-family:   'monospace';
  display:       block;
  padding-right: 5px;
  font-size:     12px;
}

.selected-dark::after {
  content:       "<=";
  color:         black;
  font-family:   'monospace';
  display:       block;
  padding-right: 5px;
  font-size:     12px;
}

.w40px {
  min-width: 40px;
  max-width: 40px;
}

.text-center {
  text-align: center;
}

.checkerboard {
  background-image:
    linear-gradient( 45deg, #444 25%,        transparent 25%),
    linear-gradient(-45deg, #444 25%,        transparent 25%),
    linear-gradient( 45deg, transparent 74%, #444 75%),
    linear-gradient(-45deg, transparent 75%, #444 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.shadow {
  text-shadow:
    black 1px 1px 2px,
    white 0px 0px 16px,
    white 0 0 2px;
}

/* builder */

#builder-ui {
  border-top: 1px solid #444; 
  margin-top: 15px;
  padding: 15px 0 30px 0;
}

#builder-controls {
  padding-bottom: 10px;
}

#builder-controls div.column {
  padding : 0 15px;
}

#code-output {
  flex:           1 1 400px;
  font-family:    "JetBrains Mono", "Hack", monospace;
  width:          100%;
  padding-bottom: 15px;
}

.p5px {
  padding: 5px;
}

#rotate-image {
  height: 210px;
}

select[name="angle"] {
  width: 70px;
}

/* common styles below */

.toggle, h2.toggle > span, h3.toggle > span {
  -webkit-user-select: none;
          user-select: none;
  cursor:      pointer;
}

.toggle:hover {
  background-color: whitesmoke;
  border-radius:    3px;
}

.flex {
  display: flex;
  gap:     5px;
}

.wrap {
  flex-wrap: wrap;
}

.justify-end {
  justify-content: end;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.column {
  flex-direction: column;
}

.m0a {
  margin: 0 auto;
}

.w50 {
  flex-basis: 50%;
  min-width: 50%;
}

.pull-right {
  margin-left: auto;
}

html {
  height: 100vh;
}

body {
  background-color: #ccc;
  color:            #525252;
  height:           100vh;
  padding:          10px;
  -webkit-user-select:      none;
          user-select:      none;
}

main {
  position: relative;
}

label p {
  display:    flex;
  align-self: center;
  flex-grow:  1;
}

input[type="number"],
input[type="checkbox"] {
  width:  70px;
  margin: 0;
}

input[type="checkbox"] {
  height: 24px;
  max-width: 30px;
}

input[type="number"],
select {
  min-height: 44px;
}

button {
  display:    block;
  min-height: 44px;
}

.hidden {
  display: none;
}