@import "{design}/app"

$height = 25px
$textColorButtonActive = #2D2D2D

.roundedButtonGroup

  .roundedButtonWrapper
    cursor: pointer
    display: inline-block
    float: left
    margin-left: -1px
    text-decoration: none
    text-align: center

    .roundedButton
      align-items: center
      theme('background-color', '$uiGrayDark')
      theme('border', '2px solid $uiBorderColorDark')
      theme('color', '$textSecondaryColor')
      display: flex
      font-size: 11px
      font-weight: 500
      justify-content: center
      height: $height
      line-height: $height
      padding: 0 22px
      text-transform: uppercase
      transition: transition($sidebarTransition)

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

      svg
      span
        margin: 0 2px

      i
        line-height: 15px
        font-size: 15px

    .bottomLabel
      theme('color', '$textSecondaryColor')
      font-size: 12px
      font-weight: 500
      line-height: 12px
      margin-top: 8px

    &:first-child
      margin-left: 0
      .roundedButton
        border-bottom-left-radius: $height
        border-top-left-radius: $height

    &:last-child .roundedButton
      border-bottom-right-radius: $height
      border-top-right-radius: $height

    &:hover .roundedButton
      theme('color', '$uiGrayDark')
      theme('background-color', '$boxBackgroundColor')

    &.active .roundedButton
      theme('background-color', '$activeColor')
      theme('border-color', '$uiBorderColorActive')
      color: $textColorButtonActive

    &:hover .roundedButton
    &.active .roundedButton
      svg
        theme('fill', '$uiGrayDark')
        theme('stroke', '$uiGrayDark')