text: @import 'mixins'
  
  #app .inspector {
    width: 220px
  
    position: absolute
    top: 0
    right: 0
    bottom: 0
  
    box-shadow: inset 1px 0 2px rgba(0, 0, 0, 0.3)
    background: #F5F5F5
    color: #000
    -webkit-user-select: none
    vbox()
  
    header {
      hbox()
      -webkit-box-pack: center
      vbg-gradient(#959A9B, #767B7C)
      color: #FFF
  
      text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3)
      text-transform: uppercase
      font-weight: bold
      font-size: 11px
  
      div {
        box-flex(1)
        padding: 8px 15px
        cursor: pointer
        text-align: center
  
        &:last-child {
          border-right: none
        }
  
        &:active, &.active {
          vbg-gradient(darken(#959A9B, 10%), darken(#767B7C, 5%))
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2)
        }
      }
    }
  
    .textInspector, .displayInspector {
      box-flex(1)
      overflow-x: auto
  
      &:not(.active) {
        display: none
      }
    }
  
    h3 {
      line-height: 20px
      padding: 0 8px
      margin: 0
      vbg-gradient(#F1F1F1, #DDDDDD)
      border-left: 1px solid #C6C6C6
      border-top: 1px solid #DDDDDD
      border-bottom: 1px solid #C6C6C6
      color: #777
      text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8)
      text-transform: uppercase
      font-weight: bold
      font-size: 11px
    }
  
    article {
      overflow: hidden
      padding: 10px
    }
  
    label {
      display: block
  
      span {
        display: inline-block
        width: 30px
      }
  
      span:after {
        content: ":"
      }
  
      input {
        margin: 3px
      }
    }
  
    ::selection {
      background: #E0EDF8
      text-shadow: none
    }
  
    input[type=text], input[type=url], input[type=number], input[type=color], textarea {
      border: 1px solid rgba(0, 0, 0, 0.3)
      inset-box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.1))
    }
  
    input[disabled] {
      opacity: 0.8
    }
  
    input[type=number] {
      width: 35px
    }
  
    .colorInput {
      .preview {
        width: 30px
        height: 30px
        display: inline-block
  
        border: 1px solid rgba(0, 0, 0, 0.3)
        padding: 3px
        cursor: pointer
      }
  
      input {
        display: inline-block
      }
    }
  
    .colorPreview {
      width: 40px
      height: 16px
      display: inline-block
      margin: 3px
  
      border: 1px solid #9B9B9B
      cursor: pointer
  
      background: url(grid.png) repeat
  
      .inner {
        width: 40px
        height: 16px
      }
    }
  
    .positionPicker {
      width: 40px
      height: 40px
  
      background: #FFF url(crosshairs.png) center center no-repeat
      border: 1px solid rgba(0, 0, 0, 0.3)
      cursor: pointer
      position: relative
  
      .ball {
        position: absolute
        width: 12px
        height: 12px
        margin: -6px 0 0 -6px
  
        vbg-gradient(#FFF, #EFEFEF)
        border-radius: 50%
        border: 1px solid rgba(0, 0, 0, 0.3)
      }
    }
  
    .list {
      background: #FFF
      border-radius: 4px
      margin: 10px 10px 0 10px
      overflow: hidden
      border: 1px solid rgba(0, 0, 0, 0.25)
      box-shadow: 0 1px 1px #FFF
  
      .items {
        min-height: 35px
        max-height: 100px
        overflow-x: auto
      }
  
      .item {
        padding: 8px
        cursor: pointer
        border-bottom: 1px solid rgba(0, 0, 0, 0.2)
        ellipsis()
  
        .preview {
          margin: 0 3px 0 0
          width: 8px
          height: 8px
          display: inline-block
          border: 1px solid rgba(0, 0, 0, 0.1)
        }
  
        &:last-child {
          border-bottom: none
        }
  
        &.selected {
          color: #FFF
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2)
          vbg-gradient(#BCC6DE, #9BA8C7)
        }
  
        &.selected .preview {
          border: none
        }
     }
  
      footer {
        border-top: 1px solid rgba(0, 0, 0, 0.15)
        inset-line(0.8)
        vbg-gradient(lighten(rgba(238, 238, 238, 1), 80%), rgba(238, 238, 238, 0.9))
        -webkit-border-radius: 0 0 4px 4px
        overflow: hidden
  
        button {
          margin: 0
          display: block
          float: left
  
          color: #5B5B5B
          font-size: 14px
          font-weight: bold
          text-transform: uppercase
          text-shadow: 0 1px 1px #FFF;
          padding: 2px 12px
          box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.5)
          border: none
          border-right: 1px solid rgba(0, 0, 0, 0.15)
          background: none
  
          &:active {
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2)
          }
        }
      }
    } // .list
  }