@import "{design}/app"

.toolbarSection
  height: $toolbarHeight
  padding-top: 6px
  width: 100%
  border-bottom: $uiBorderColor $uiBorderThickness solid

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

    &.disabled
      opacity: 0.5
      cursor: not-allowed

    .buttonLabel
      color: $textSecondaryColor
      font-size: 12px

    .svgContainer
      margin: 0 auto
      text-align: center

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


    &:hover

      .buttonLabel
        color: $hoverColor

      svg
        fill: $hoverColor
        stroke: $hoverColor

    &:active, &.active
      .buttonLabel
        color: $activeColor

      svg
        fill: $activeColor
        stroke: $activeColor

  .toolbarSectionEntry
    color: $defaultColor
    cursor: pointer
    display: inline-block
    fill: $defaultColor
    margin-top: 3px
    min-width: 30px
    stroke: $defaultColor
    text-align: center