@import "{design}/app"

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

  .toolbarSectionTools
    margin-left: 41px

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

    &.disabled
      opacity: 0.5
      cursor: not-allowed

    .buttonLabel
      font-size: 12px

    .svgContainer
      margin: 0 auto
      text-align: center

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

    &:active, &.active
      color: $activeColor

      svg
        fill: $activeColor
        stroke: $activeColor

    &:hover
      color: $hoverColor

      svg
        fill: $hoverColor
        stroke: $hoverColor

  .toolbarSectionEntry
    display: inline-block
    color: $defaultColor
    fill: $defaultColor
    stroke: $defaultColor
    padding: 0 10px
    height: $toolbarHeight
    min-width: 30px
    cursor: pointer
    text-align: center

  .quickSwitch
    position: absolute

    &.middle
      left: calc(50% - 60px)

    &.left
      left: calc(50% - 160px)

    &.right
      left: 50%
      margin-left: 20px