@use 'sass:selector'
@use '../../styles/tools'
@use '../VBtn/variables' as *
@use './variables' as *

@include tools.layer('components')
  .v-btn-group
    display: inline-flex
    flex-wrap: nowrap
    max-width: 100%
    min-width: 0
    overflow-y: hidden
    overflow-x: auto
    vertical-align: middle

    @include tools.border($btn-group-border...)
    @include tools.elevation($btn-group-elevation)
    @include tools.rounded($btn-group-border-radius)
    @include tools.theme($btn-group-theme...)

    .v-btn
      border-radius: 0
      border-color: inherit

    &--tile
      @include tools.rounded($btn-group-tile-border-radius)

    &--horizontal
      $root: &

      @at-root
        @include tools.density('v-btn-group', $button-density) using ($modifier)
          @at-root #{selector.append(&, $root)}
            height: $btn-group-height + $modifier

      .v-btn
        &:not(:last-child)
          border-inline-end: none

        &:not(:first-child)
          border-inline-start: none

        &:first-child
          border-start-start-radius: inherit
          border-end-start-radius: inherit

        &:last-child
          border-start-end-radius: inherit
          border-end-end-radius: inherit

      &.v-btn-group--divided
        .v-btn:not(:last-child)
          border-inline-end-width: $btn-group-border-thin-width
          border-inline-end-style: $btn-group-border-style
          border-inline-end-color: $btn-group-border-color

    &--vertical
      flex-direction: column

      .v-btn
        &:not(:last-child)
          border-block-end: none

        &:not(:first-child)
          border-block-start: none

        &:first-child
          border-start-start-radius: inherit
          border-start-end-radius: inherit

        &:last-child
          border-end-start-radius: inherit
          border-end-end-radius: inherit

      &.v-btn-group--divided
        .v-btn:not(:last-child)
          border-block-end-width: $btn-group-border-thin-width
          border-block-end-style: $btn-group-border-style
          border-block-end-color: $btn-group-border-color