:root {
  --st-font-size : 12px;
}

#loading {
  position         : absolute;
  top              : 0;
  bottom           : 0;
  left             : 0;
  right            : 0;
  z-index          : 9999;
  background-color : white;
}

header {
  position         : relative;
  top              : 0;
  left             : 0;
  min-width        : 480px;
  max-width        : 100%;
  width            : 100%;
  height           : 6em;
  padding          : 1em;
  box-shadow       : 0 2px 4px -2px var(--st-color-5);
  background-color : var(--st-color-2);
  z-index          : 500;
}

main {
  width     : 100%;
  max-width : initial;
  margin    : 0;
  padding   : 0;
}

aside {
  height           : calc(100vh - 6em);
  padding          : 1em;
  background-color : var(--st-color-1);
  z-index          : 400;
  border-right     : 1px solid var(--st-color-3);
  overflow-y       : auto;
  scrollbar-gutter : stable;
}

aside #options {
  width : 100%;
}

aside #options .show-hide > label {
  font-size : var(--st-font-size-l);
}

input.color-text {
  width : calc(100% - 36px) !important;
}

input[type=color].color-pick {
  height         : 40px;
  width          : 38px;
  padding        : 0;
  border         : 0;
  background     : transparent;
  vertical-align : middle;
  margin-top     : -4px;
  margin-left    : -6px;
}

.tooltip {
  position : relative;
}

.tooltip .tooltiptext {
  visibility       : hidden;
  width            : min(200px, 14vw);
  background-color : var(--st-color-6);
  color            : #fff;
  text-align       : center;
  border-radius    : var(--st-border-radius);
  padding          : 10px 10px;
  opacity          : 0;
  transition       : opacity 1s;
  position         : absolute;
  z-index          : 1;
  top              : 0;
  left             : 105%;
  margin-left      : 5px;
  margin-top       : -6px;
}

.tooltip:hover .tooltiptext {
  visibility : visible;
  opacity    : 1;
}

.tooltip .tooltiptext::after {
  content      : "";
  position     : absolute;
  top          : 16px;
  right        : 100%;
  margin-top   : -5px;
  border-width : 5px;
  border-style : solid;
  border-color : transparent var(--st-color-6) transparent transparent;
}

.help {
  display       : inline-block;
  width         : 14px;
  height        : 14px;
  font-size     : 10px;
  padding-left  : 4px;
  line-height   : 13px;
  margin-left   : 4px;
  border        : 1px solid var(--st-color-5);
  border-radius : 50%;
  color         : var(--st-color-5);
  cursor        : help;
}

.help:hover {
  border-color : var(--st-color-8);
  color        : var(--st-color-8);
  
}

.reset-button {
  background-color : initial;
  border           : 0;
  padding-left     : 0;
  padding-right    : 0;
  padding-top      : 0.5em;
  font-size        : large;
  line-height      : 1.5rem;
  margin           : 0;
  color            : var(--st-color-5);
}

.reset-button:hover {
  color : var(--st-color-9);
}

.reset-button:focus {
  color : var(--st-color-7);
}

#example {
  margin   : 1em auto 0 auto;
  width    : calc(100% - 4em);
  display  : block;
  height   : calc(100vh - 10.2em);
  position : relative;
}

h1 {
  font-size   : var(--st-font-size-xxxl);
  line-height : 1em;
}

h2 {
  font-size : var(--st-font-size-xxl);
  margin    : 0.15em;
}

button {
  margin-right : 0.5em;
}

dialog {
  border     : 1px solid grey;
  box-shadow : 2px 2px 10px grey;
  width      : 50vw;
  height     : 50vh;
}

.export-preview {
  height   : calc(45vh - 100px - 2em);
  overflow : auto;
}

#version {
  float  : right;
  margin : 15px 22px 0 0;
}


@media screen and (max-width : 768px) {
  .col, [class^='col-'], [class*=" col-"] {
    margin : 0.5em 0 !important;
    flex   : 1 !important;
  }
}

/*
 Dark mode
 */
@media (prefers-color-scheme : dark) {
  
  #loading {
    background-color : black;
  }
  
  header {
    box-shadow       : 0 2px 4px -2px var(--st-color-9);
    background-color : var(--st-color-7);
  }
  
  aside {
    background-color : var(--st-color-6);
    border-right     : 1px solid var(--st-color-7);
  }
  
  .tooltip .tooltiptext {
    background-color : var(--st-color-9);
  }
  
  .tooltip .tooltiptext::after {
    border-color : transparent var(--st-color-9) transparent transparent;
  }
  
  .help {
    border : 1px solid var(--st-color-4);
    color  : var(--st-color-4);
  }
  
  .help:hover {
    border-color : var(--st-color-3);
    color        : var(--st-color-3);
    
  }
  
  .reset-button {
    color : var(--st-color-4);
  }
  
  .reset-button:hover {
    color : var(--st-color-3);
  }
  
}