$base-dark: #000;
$base-light: #f1f1f1;
$medium-dark: #312c24;
$medium-light: #f9de4e;
$highlight-dark: #bb1654;
$highlight-light: #fadf1d;

$a: 1;
$b: 1;

* { box-sizing: inherit; }

html {
  box-sizing: border-box;
  background: $base-dark;
  font: 1em trebuchet ms, verdana, sans serif;
}

body { margin: 0; }

svg {
  position: absolute;
  left: calc(50vw - #{$a/$b/2*100vh});
  height: 100vh; width: $a/$b*100vh;
}

.assembly {
  
  &--zebra {
    
  }
}

.layer {
  cursor: pointer;
  
  &__polygon {
    fill: darken($medium-dark, 14%);
  }
  
  &:nth-child(odd) &__polygon {
    fill: darken($medium-dark, 12%);
  }
  
  &:hover &__polygon {
    fill: mix($medium-dark, $medium-light, 50%);
  }
  
  &__highlight {
    fill: $base-light;
    fill-opacity: .05;
  }
  
  &:hover &__highlight {
    fill-opacity: .5;
    
    &:hover {
      fill-opacity: .99;
    }
  }
  
  &__edge {
    stroke: $highlight-dark;
    stroke-width: 2;
    pointer-events: none;
  }
  
  &__point {
    fill: $highlight-light;
    stroke-width: 10;
    
    &--vertex {
      fill: $highlight-dark;
      stroke: $base-light;
    }
  }
  
  &:hover &__point {
    stroke: $base-dark;
  }
}

.controls {
  position: fixed;
  top: .5em;
  padding: .5em;
  //background: $medium-dark;
  color: $base-light;
  text-align: center;
  
  label {
    display: block;
    padding: .75em 0;
    text-align: left;
    
    & ~ label { padding-top: 2em; }
  }
  
  input {
    padding: .25em .5em;
    display: inline-block;
    vertical-align: middle;
    
    &[type='range'] {
      cursor: pointer;
      
      &:focus {
        outline: none;
      }
    }
    
    &[type='text'] {
      max-width: 3em;
      border: none;
      border-radius: .25em;
      box-shadow: 0 0 .25em $highlight-dark;
      background: transparent;
      color: $base-light;
      text-align: right;
      
      &:focus {
        box-shadow: 0 0 .25em $highlight-light;
      }
    }
  }
}

@media (max-aspect-ratio: #{$a}/#{$b}) {
  svg {
    top: calc(50vh - #{$b/$a/2*100vw}); left: auto;
    width: 100vw; height: $b/$a*100vw;
  }
}