@import "{ohif:design}/app"

$height = 20px

#protocolEditor
  theme('background', '$primaryBackgroundColor')
  height: 100%
  width: 450px
  padding: 10px 0
  position: absolute
  top: 0

  .navigationButtonsContainer
    margin-left: 0
    margin-right: 0

    .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
          theme('background-color', '$uiGrayDark')
          theme('border', '2px solid $uiBorderColorDark')
          theme('color', '$textSecondaryColor')
          transition: transition($sidebarTransition)
          border-radius: $height

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

  p
  h2
  h3
  h4
    theme('color', '$defaultColor')

  label
  ul
    theme('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
    theme('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
    theme('background', '$uiGrayDarker')

    p
      font-size: 8pt
      theme('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
        theme('color', '$defaultColor')