@import 'common';

html, body {
  margin: 0;
  width: 4 * $canvas-width + 3 * $canvas-gap;
  height: 4 * $canvas-height + 3 * $canvas-gap;
}

body {
  font-size: $default-font-size;
  font-family: sans-serif;
  background-color: $body-background-color;
}

address {
  position: relative;
  font-style: inherit;
  .link-list {
    a:after {
      content: ',';
    }
    a.head:after {
      content: ':';
    }
    a:last-child:after {
      content: '';
    }
    // remove underline on the separators
    a:after {
      display: inline-block;
    }
  }
}
sub {
  vertical-align: baseline;
  font-size: x-small;
}

::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-thumb {
  border: ($panel-border-radius / 2) solid $body-background-color;
  background-color: $panel-text-color-darker;
  border-radius: $panel-border-radius;
}
::-webkit-scrollbar-corner {
   background-color: transparent;
}

button, select, input[type="text"] {
  background-color: $panel-interaction-background-color;
  color: $panel-interaction-text-color;
  border-radius: $panel-interaction-border-radius;
  border-color: $panel-interaction-border-color;
  border-width: 1px;
}
input[type="text"]::placeholder {
  color: #707070;
}
select::-webkit-scrollbar-thumb {
  border-color: $panel-interaction-background-color;
  // dropdown list can't have a round border so match the scrollbar to that
  border-radius: 0;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
.inline {
  display: inline;
}
.normal-font-size {
  font-size: 1em;
}
.monospace {
  font-family: monospace;
}
.align-right {
  position: absolute;
  right: 0;
}
.version {
  font-family: sans-serif;
}

#canvas-container {
  // these makes gaps between canvas to be always 8px
  letter-spacing: $canvas-gap - 10px;
  line-height: 2 * $canvas-gap + 10px;
  // ensure contrast of fallback text on default black background
  canvas {
    color: grey;
  }
}

.control-panel {
  $control-panel-font-size: 14px;
  font-size: $control-panel-font-size;
  position: fixed;
  top: 2 * $canvas-height + $canvas-gap;
  left: $canvas-width;
  width: 2 * ( $canvas-width + $canvas-gap ) - $default-font-size;
  height: 2 * ( $canvas-height + $canvas-gap ) - $default-font-size;
  padding: 0.5 * $default-font-size;
  overflow-y: scroll;
  background-color: $panel-background-color;
  color: $panel-text-color;
  border-radius: 0 $panel-border-radius $panel-border-radius;
  transition: opacity 0.2s;
  &::-webkit-scrollbar-thumb {
    border-color: $panel-background-color;
  }
  
  // negative z-index can't be interacted in OBS interact window
  &.inactive {
    opacity: 0;
    z-index: -1;
  }
  &.active {
    opacity: 1;
    z-index: auto;
  }
  
  & > div {
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid $panel-text-color;
    &:last-of-type, &.half-width, &.no-divider {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: 0;
    }
    &.vertical-space-but-no-divider {
      padding: 0.5em 0;
      border-bottom: 0;
    }
    &.after-margin {
      margin-bottom: 0.5em;
      padding-bottom: 0.5em;
    }
    &.top-divider {
      padding-top: 0.5em;
      margin-top: 0.5em;
      border-top: 1px solid $panel-text-color;
    }
    &.va-top, &.half-width {
      vertical-align: top;
    }
    &.half-width {
      width: 48%;
      display: inline-block;
    }
  }
  
  b {
    // control panel section name
    display: block;
    margin-bottom: 0.5em;
    &.inline {
      display: inline;
    }
  }
  label {
    display: inline-block;
  }
  address {
    font-size: 0.8em;
    margin-top: 0.25em;
    a {
      color: $panel-text-color-brightest;
    }
  }
  
  .after-margin {
    margin-bottom: 0.25em;
    &.button-container,
    &.multiline-button-container {
      // put space between rows of buttons
      line-height: 2em;
      margin-top: -0.25em;
    }
    &.button-container {
      // compensate bottom margin made from line-height
      margin-bottom: 0.035em;
    }
    &.one-button-each-line,
    &.two-buttons-each-line {
      line-height: 2em;
      button.inactive {
        display: none;
      }
    }
    &.one-button-each-line {
      button {
        display: block;
        // compensate line-height lost from being block display
        // align with `.two-buttons-each-line` vertically
        margin-top: 0.9em;
        margin-bottom: -0.225em;
      }
      margin-bottom: 0.55em;
    }
    &.two-buttons-each-line {
      div {
        button {
          display: inline-block;
        }
      }
    }
  }
  span.after-margin {
    display: block;
  }
  .full-width {
    display: block;
  }
  .inactive {
    display: none;
  }
  .description {
    font-size: 0.8em;
    b {
      // title of a description
      display: inline;
    }
  }
  div.cpMessage {
    padding: 0.5em;
    border-radius: 8px;
    color: $panel-text-color-brightest;
    &:before {
      font-family: Segoe UI Emoji, monospace;
      margin-right: 0.2em;
    }
    a {
      color: $panel-text-color-brightester;
    }
    b {
      display: inline;
    }
    &.caution {
      background-color: #5e5c37;
      &:before {
        content: '⚠️ ';
      }
      a {
        color: #cac89d;
      }
    }
    &.info {
      background-color: #374c5e;
      &:before {
        content: 'ℹ️ ';
      }
      a {
        color: #9db5ca;
      }
    }
  }
  
  @media (max-height: 599px) and (orientation: landscape) {
    & {
      height: auto;
      bottom: 0;
    }
  }
}
