#e2d-canvas-views
  position: absolute
  width: 100%
  height: 100%
  top: 0
  left: 0
  z-index: -1 // underneath SVG view

#e2d-webgl-status
  font-size: 0.7em
  color: #222
  padding: 0

  position: absolute
  width: 96%
  top: 2%
  left: 2%
  z-index: 1 // on top of SVG view

  p, .component
    margin: 0 0 0.4em 0
  a
    margin: 0 0 0.4em 0
    font-weight: 600

  .happy
    font-weight: 600
    color: #294900
  .sad
    font-weight: 600
    color: #6D0035

  .extension
    margin-left: 0.5em
    font-size: 0.8em

  .button
    font-size: 1.2em
    opacity: 0.5

  .button:hover
    opacity: 1
    cursor: pointer

  .fakeCheckable
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.3)

#status-wrapper
  padding: 0.3em 1.8em 0.1em 0.5em
  border-radius: 0.5em
  box-shadow: rgba(0, 0, 0, 0.3) 0.2em 0.2em 0.2em
  @include linear-gradient(rgba(255, 255, 255, 0.5), rgba(104, 104, 104, 0.5), $fallback: rgba(255, 255, 255, 0.9))

#hide-webgl-status
  color: #222
  position: absolute
  top: 0.1em
  right: 0.35em

#show-webgl-status
  color: #fff
  position: absolute
  top: -0.2em
  &.happy
    color: #8FFF00
  &.sad
    color: #FF0000

// Parts
.e2d-part-shape
  stroke: #000
  stroke-width: 2px

.e2d-part-shape-outline
  stroke: #ddd
  stroke-width: 1.5px

.e2d-part-label-shadow
  stroke: #000
  font-size: 0.7em
  stroke-width: 0.15em
  stroke-opacity: 0.7

.e2d-part-label
  fill: #fff
  font-size: 0.7em

.e2d-texture-path-shadow
  stroke: #000
  stroke-width: 3px
  opacity: 0.5

.e2d-texture-path
  stroke: #fff
  stroke-width: 1.5px
  opacity: 0.5

// Sensors
.e2d-sensor-reading
  fill: #eee
  font-size: 0.6em

.e2d-sensor-reading-shadow
  stroke: #000
  font-size: 0.6em
  stroke-width: 0.15em
  stroke-opacity: 0.7

.e2d-sensor-label
  fill: #eee
  font-size: 0.5em

.e2d-sensor-label-shadow
  stroke: #000
  font-size: 0.5em
  stroke-width: 0.15em
  stroke-opacity: 0.7

.e2d-measuring-point
  fill: none
  stroke-width: 0.5px
  stroke: #333

// Thermometers
.e2d-thermometer-background
  fill: #fff
  stroke: #333
  stroke-width: 0.5px

.e2d-thermometer-fill
  fill: #f32
  stroke: #333
  stroke-width: 0.5px

// Anemometers
.e2d-anemometer-shape path
  fill: #eee
  stroke: #000
  stroke-width: 2px
.e2d-anemometer-shape circle
  fill: #ff4411
  stroke: #000
  stroke-width: 2px

// Heat flux sensors
.e2d-heatflux-shape
  fill: #eee
  stroke: #333
  stroke-width: 1.5px
.e2d-heatflux-pattern
  fill: none
  stroke: #333
  stroke-width: 0.2px // note it's affected by the viewBox transformation
