@import "{design}/app"

.toolbarSection
  border-bottom: $uiBorderColor $uiBorderThickness solid
  flex: 0 0 auto
  height: $toolbarHeight
  overflow: hidden
  padding-top: 6px
  position: relative
  transition(height 300ms ease)
  width: 100%

  &.expanded
    height: $toolbarHeight + $toolbarDrawerHeight

  .toolbarSectionTools
    position: relative

    .toolbarSectionDrawerContainer
      bottom: - ($toolbarDrawerHeight + 12px)
      height: $toolbarDrawerHeight
      left: 0
      position: absolute
      width: 100%

      .toolbarSectionDrawer
        background-color: $uiGrayDarker
        border-radius: 7px
        color: $textPrimaryColor
        content: ''
        display: block
        font-size: 18px
        height: $toolbarDrawerHeight - 12px
        line-height: $toolbarDrawerHeight - 12px
        text-align: center
        width: 100%

    #moreTools

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

      &.active .buttonLabel i
        transform(rotateX(180deg))


  .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