@import "{ohif:design}/app"

label.wrapperLabel
  cursor: pointer

label.wrapperLabel:not(.checkboxLabel)
  cursor: pointer
  display: flex
  flex-direction: column

  .wrapperText
    display: block
    order: -1
    transition(color 0.3s ease)

.form-themed

  .btn, input[type=text], input[type=password], input[type=number]

    &[disabled], &.disabled

      &, &:hover, &:active
        theme('background-color', '$uiGrayDarker')
        theme('border-color', '$uiGrayLight')
        theme('color', '$textPrimaryColor')

        & + .wrapperText
          theme('color', '$textPrimaryColor')
          cursor: auto

  input[type=text], input[type=password], input[type=number]
    theme('background-color', '$uiGray')
    theme('border-color', '$uiBorderColor')
    theme('color', '$textPrimaryColor')
    font-weight: normal
    transition(background-color 0.3s ease\, border-color 0.3s ease)

    &:active, &:focus
      theme('background-color', '$uiGrayDark')
      theme('border-color', '$activeColor')
      box-shadow: none

      & + .wrapperText
        theme('color', '$activeColor')

  .btn-primary
    theme('background-color', '$activeColor')
    theme('border-color', '$uiBorderColorActive')
    theme('color', '$textColorActive')
    transition(background-color 0.3s ease\, border-color 0.3s ease)

    &:hover, &:active, &:focus, &:focus:active
      theme('background-color', '$activeColor', 0.8)
      theme('border-color', '$uiBorderColorActive', 0.8)
      theme('color', '$textColorActive')

  span.select2.select2-container
    width: 100% !important

    span.select2-selection
      color: rgba(255, 255, 255, 0.52)
      background-color: #2c353f

      span.select2-selection__arrow
        theme('background-color', '$uiGray')

      &:hover, &:focus
        span.select2-selection__arrow
          theme('background-color', '$uiGray')
          theme('color', '$textPrimaryColor')

      span.select2-selection__rendered
        theme('color', '$textPrimaryColor')
        font-size: 14px

    &.select2-container--open span.select2-selection span.select2-selection__arrow
      theme('background-color', '$uiGrayDark')
      theme('color', '$textPrimaryColor')

  .form-control
    background-color: #FFFFFF
    border: 0
    border-radius(2px)
    font-size: 14px
    height: 30px
    line-height: 16px
    padding: 8px 9px 6px

    &:focus
      theme('box-shadow', '0 0 0 2px $activeColor !important')

  .form-themed .form-control
    theme('box-shadow', '0 0 0 1px $uiBorderColor')