@import "{design}/app"

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

  &.disabled
    opacity: 0.5
    cursor: not-allowed

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

  .svgContainer
    margin: 0 auto
    text-align: center
    
    i
      font-size: 18px
      line-height: 30px

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

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

    svg
      theme('fill', '$hoverColor')
      theme('stroke', '$hoverColor')
      
    i
      theme('color', '$hoverColor')

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

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