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

/** Themes */

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

  .v-btn
    color: $material.text.primary

  &:not(.v-btn-toggle--only-child)
    .v-btn
      &.v-btn--active:not(:last-child)
        border-right-color: $material.buttons.disabled

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

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

  .v-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

    &.v-btn--active
      opacity: 1

    span + .v-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)