@import '../bootstrap'
@import '../theme'

/** Themes */

btn-toggle($material)
  background: $material.cards

  .btn
    color: $material.text.primary

    &.btn--active:not(:last-child):not([data-only-child])
      border-right-color: $material.buttons.disabled

theme(btn-toggle, "btn-toggle")

.btn-toggle
  display: inline-flex
  border-radius: 2px
  transition: $primary-transition
  will-change: background, box-shadow

  .btn
    justify-content: center
    min-width: auto
    width: auto
    padding: 0 8px
    margin: 0
    opacity: .4
    border-radius: 0

    &:not(:last-child)
      border-right: 1px solid transparent

    &:after
      display: none

    &.btn--active
      opacity: 1

    &__content
      padding: 0

    span + .icon
      font-size: initial
      margin-left: 10px

    &:first-child
      border-radius: 2px 0 0 2px

    &:last-child
      border-radius: 0 2px 2px 0

  &--selected
    elevation(2)