@import "{design}/app.styl"

$height = 20px

#protocolEditor
  height: 100%
  width: 450px
  padding: 10px 0
  position: absolute
  top: 0
  background: $primaryBackgroundColor

  .navigationButtons
    ul
      margin: 0 auto
      width: 300px

    li
      text-align: center
      width: 150px
      margin: 0

      &:first-child:not(:last-child)
        a
          border-top-right-radius: 0
          border-bottom-right-radius: 0

      &:last-child:not(:first-child)
        a
          border-top-left-radius: 0
          border-bottom-left-radius: 0

      a
        padding: 3px 9px
        cursor: pointer
        text-decoration: none
        outline: none
        background-color: $uiGrayDark
        border: 1px $uiBorderColorDark solid
        color: $textSecondaryColor
        transition: transition($sidebarTransition)
        border-radius: $height

      &.active a
        background-color: $activeColor
        border-color: $uiBorderColorActive
        color: $textColorActive
        transition: transition($sidebarTransition)

  p
  h2
  h3
  h4
    color: $defaultColor

  label
  ul
    color: $defaultColor
    font-weight: 400

  label
    margin-right: 10px
    width: 25%

  input[type='number']
  input[type='text']
    min-width: 50px
    width: 40%
    border: none
    background: #212121
    color: $defaultColor
    text-align: center

  button.btn
    background: #ffffff
    color: #3e3e3e

  .protocolEditorSection
    padding: 10px
    margin: 10px 0

  #protocolOptions
    text-align: center
    position: absolute
    bottom: 0
    width: 100%
    margin-bottom: 0
    background: $uiGrayDarker

    p
      font-size: 8pt
      color: $defaultColor
      margin: 0 10px
      display: inline-block

  #editProtocol
    overflow-y: auto
    overflow-x: hidden
    padding-right: 16px
    padding-left: 20px
    margin-right: -16px
    width: 100%
    height: calc(100% - 50px)
    &::-webkit-scrollbar
      display: none

  #selectProtocol
    text-align: center

    .btn-file 
      position: relative
      overflow: hidden
      
    .btn-file input[type=file] 
      position: absolute
      top: 0
      right: 0
      min-width: 100%
      min-height: 100%
      font-size: 100px
      text-align: right
      filter: 'alpha(opacity=0)'
      opacity: 0
      outline: none
      background: white
      cursor: inherit
      display: block

    .protocolDropdown
      display: inline-block

      ul
        li
          a
            cursor: pointer

  #activeViewportEditor
    padding: 10px

    .noActiveViewport
      padding: 40px

      h3
        color: $defaultColor