@import "{ohif:design}/app"

.toolbarSectionButton
  theme('color', '$defaultColor')
  theme('fill', '$defaultColor')
  theme('stroke', '$defaultColor')
  cursor: pointer
  display: inline-block
  min-width: 30px
  outline: none
  position: relative
  text-align: center

  &.disabled
    &>.buttonLabel, &>.svgContainer
      opacity: 0.5
      cursor: not-allowed

      &:hover
        &, i
          theme('color', '$textSecondaryColor')

  .buttonLabel
    theme('color', '$textSecondaryColor')
    font-size: 12px
    font-weight: 500

  .svgContainer
    margin: 0 auto
    text-align: center

    i
      theme('color', '$textSecondaryColor')
      font-size: 18px
      line-height: 30px

  svg
    background-color: transparent
    margin: 2px
    width: 21px
    height: 21px

  &:hover
    &>.buttonLabel
      theme('color', '$hoverColor')

      &>i
        theme('color', '$hoverColor')

    &>.svgContainer>svg
      theme('fill', '$hoverColor')
      theme('stroke', '$hoverColor')

  &:active, &.active
    &>.buttonLabel, &>.svgContainer
      theme('color', '$activeColor')

      svg
        theme('fill', '$activeColor')
        theme('stroke', '$activeColor')

      i
        theme('color', '$activeColor')