.physical {
  background:#FFF;
  @keyframes smoke {
    from {  stroke: #FF0000 }
    to   {  stroke: #000000 }
  }
  font-size:16px;
  .logic {
    display:none;
  }
  .togglebutton {
    .outer {
      fill: #f5f5f5;
      stroke: #000000;
      stroke-width: 0.5;
    }
    circle {
      fill:#FF0000;
      cursor: pointer;
    }
    .inner {
      font-size:8px;
    }
    text.label {
      font-weight: bold;
    }
    .labelbg {
      fill: rgba(255,255,255,.75);
    }
  }
  .switch {
    cursor: pointer;
  }
  
  #dot {
    fill: #000000;
    opacity: 0.4;
  }
  .wire {
    fill: none;
    stroke-width: 2;
    stroke: #333;
    transition: stroke 0.4s;
    &.brightred {
      stroke: #FF0000;
    }
    &.red {
      stroke: #990000;
    }
    &.yellow {
      stroke: #FFFF00;
    }
    &.orange {
      stroke: #cc5500;
    }
    &.orange2 {
      stroke: #ee7722;
    }
    &.blue {
      stroke: #2222ff;
    }
    &.brightblue {
      stroke: #a2a2ff;
    }
    &.green {
      stroke: #229922;
    }
    &.short {
      stroke-width:5;
      animation-name: smoke;
      animation-duration: 2s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }
    &.white {
      stroke: #FFFFFF;
    }
    &:hover {
      stroke-width:3;
      animation-name: hilight;
      animation-duration: 1s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }
    &.high:hover, &.up:hover {
      stroke:#FF0000;
      transition: 0.2s;
    }
    &.low:hover, &.down:hover {
      stroke:#000000;
      transition: 0.2s;
    }
    circle {
      fill:#333;
    }
  }
}
.pull {
  .outer {
    stroke: #000000;
  }
}
.pull .physical {
  path {
    &outline {
      stroke: #000000;
    }
    stroke-width: 1;
  }
}