@import "{ohif:design}/app"

$distance = 10px

.toolbarSectionTools
  position: relative

  .toolbarSectionButton>.buttonLabel i.expanded-status
    text-align: center
    transition(all 300ms ease)
    width: 8px

  .toolbarSectionButton.expanded
    &>.buttonLabel i.expanded-status
      transform(rotateX(180deg))

    &>.toolbarSectionDrawerContainer
      opacity: 1
      transform(translateX(-50%) translateY(0) scale(1))

  .toolbarSectionDrawerContainer
    bottom: - $toolbarDrawerHeight
    height: $toolbarDrawerHeight
    left: 50%
    min-width: 100%
    opacity: 0
    padding-top: $distance
    position: absolute
    transition(opacity 0.3s ease\, transform 0.3s ease\, left 0.3s ease)
    transform(translateX(-50%) translateY( - ($toolbarDrawerHeight + $distance)) scale(0))
    white-space: nowrap
    z-index: 1

    .toolbarSectionDrawer
      theme('background', '$uiGrayDarkest', 0.95)
      theme('border', '2px solid $uiBorderColor', 0.95)
      border-radius: 7px
      theme('color', '$textPrimaryColor')
      content: ''
      display: block
      font-size: 18px
      height: $toolbarDrawerHeight
      padding-top: 6px
      text-align: center
      width: 100%