@brand-color: #dfeff1;
@image-brand-color: #83fa34;
@fx-brand-color: #fa8334;
@rec-brand-color: #fa4d8c;

@import 'icomoon';

.section-brand(@color) {
  color: @color;
  input,
  select,
  textarea,
  button,
  a {
    color: @color;
  }

  button,
  select {
    border: 1px solid @color;
  }
}

body {
  background: #000 url(pw_maze_black.png);
  margin: 0;
}

* {
  font-size: 8pt;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  box-sizing: border-box;
}

body,
input,
select,
textarea,
button,
a {
  color: @brand-color;
}

input,
select,
textarea,
button {
  background: none;
  border: none;
}

button,
select {
  border: 1px solid @brand-color;
}

#target {
  position: absolute;
  right: 0;
  top: 0;
}

body.zoom-canvas-to-fit {
  #target {
    max-height: 100vh;
    max-width: 100vw;
  }
}

#ui-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding: 3px;
  overflow-y: auto;
  overflow-x: hidden;
}

.button-row {
  display: flex;
  margin-bottom: 2px;
  > * {
    flex: 1;
    white-space: nowrap;
  }
}

.title {
  a {
    margin-right: 4px;
    &.by {
      font-weight: bold;
      text-decoration: none;
    }
  }
  margin-bottom: 3px;
}

.load-image {
  margin-bottom: 4px;
}

.recorder {
  .section-brand(@rec-brand-color);
  .frames {
    display: flex;
    max-width: 330px;
    &.slim {
      overflow-x: auto;
      flex-wrap: nowrap;
    }
    &.phat {
      flex-wrap: wrap;
    }
  }
  .frame {
    position: relative;
    margin-right: 1px;
    img {
      width: 50px;
    }
    .tools {
      position: absolute;
      top: 0;
      display: none;
      button {
        background: #000;
        padding: 3px;
        margin: 1px;
        line-height: 1;
      }
    }
    &:hover .tools {
      display: block;
    }
  }
}

.image {
  .section-brand(@image-brand-color);
  padding-bottom: 2px;
}

:disabled {
  opacity: 0.75;
}

@import 'sliders';
@import 'modui';
