// Styles for various elements managed by model view and MD2D renderer,
// which don't have to be styled dynamically.
#model-container
  background: $component-background-color
  &:focus
    outline: $focus-outline-color solid 0.2em
  &.draggable:hover
    cursor: move
  @include user-select(none)

  & > .container
    // Disable blinking effect on iOS when user taps a model container. Events are manually
    // dispatched and if user taps an atom on canvas, the whole container will blink.
    -webkit-tap-highlight-color: rgba(0,0,0,0)

  & > iframe
    // Disable standard border of iframes (iframe model type).
    border: none

  // Radial bonds.
  .radialbond1, .radialbond2
    fill: none
    // Various radial bond styles:
    // Default radial bonds have color calculated dynamically using JavaScipt.
    &.disulphideBond
      // Disulphide radial bonds have overwritten stroke color to yellow.
      // !important to overwrite value set by JavaScript code.
      stroke: #ffe95a !important

  // Genetics renderer styles.
  .genetics

    .glow
      display: none
    // Enable :hover only on no-touch devices. Workaround for iOS :hover
    // double-tap issue. Plase see:
    // http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/
    // .no-touch will be added (or not) by Modernizer.
    .no-touch & .clickable-nucleo:hover, .clickable-nucleo.glowing
      cursor: pointer
      .glow
        display: inline

    // Default style of nucleotides.
    .nucleotide

      .bonds
        stroke: #FFF
      .letter
        fill: #4A3217

      .type-A
        .outline
          fill: #278DB0
        .interior
          fill: #A2D6FF

      .type-C
        .outline
          fill: #CC5B4C
        .interior
          fill: #FBB394

      .type-G
        .outline
          fill: #CC5B4C
        .interior
          fill: #F9CEFF

      .type-T
        .outline
          fill: #278DB0
        .interior
          fill: #99F0E3

      .type-U
        .outline
          fill: #278DB0
        .interior
          fill: #83FEAF

      .stop-codon
        .outline
          fill: #C00
        .letter
          fill: #C00

    .nucleotide.promoter-region
      .outline
        fill: #060
      .interior
        fill: #5DB473
      .letter
        fill: #FFF

    .nucleotide.terminator-region
      .outline
        fill: #9E0608
      .interior
        fill: #DC4648
      .letter
        fill: #FFF

    .nucleotide.junk-region
      .outline
        fill: #666
      .interior
        fill: #ADADAD
      .letter
        fill: #FFF

    // Disable mouse events for some DNA animation objects as they can
    // accidentally capture some mouse events (e.g. hover is used), when they are
    // invisible (opacity: 0).
    .polymerase-over, .polymerase-under, .dna3
      pointer-events: none

  // Electric field vectors.
  .vector-electric-field
    stroke-width: 0.5px // affected by viewBox transform

  g.y, g.x
    fill: #555
    font-size: 0.75em
  .xlabel, .ylabel
    fill: #555
    font-size: 0.85em

  div.tooltip
    display: none
    position: fixed
    padding: 0.4em 0.6em
    font-size: 0.6em
    background: #fff
    border: solid 1px #aaa
    border-radius: 0.8em
    pointer-events: none
    pre
      margin: 0.2em

  .extent
    stroke: #fff
    fill-opacity: .125
    shape-rendering: crispEdges

  .opaque-on-hover
    opacity: 0.5
    &:hover
      opacity: 1


  // Sensor model. Shrink the components so they fit into 1 model width.
  &.sensor-model-container
    .address-input
      input
        font-size: 0.9em
        width: 15em
        border-radius: 0.4em
        border: none
        padding: 0.25em 0.5em
    .message
      width: 25em
      font-style: italic
    .interactive-button > button
      padding-left: 0.5em
      padding-right: 0.5em
    .component
      font-size: 0.9em
    .component-spacing
      margin: 0.1em 0.2em
