@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  // Block
  .v-chip-group
    display: flex
    max-width: 100%
    min-width: 0
    overflow-x: auto
    padding: $chip-group-padding

    .v-chip
      margin: $chip-group-margin

      @include tools.layer('trumps')
        @media (forced-colors: active)
          background-color: buttonface
          color: buttontext

          &:hover
            color: highlight

      &.v-chip--selected:not(.v-chip--disabled)
        .v-chip__overlay
          opacity: $chip-group-selected-opacity

        @include tools.layer('trumps')
          @media (forced-colors: active)
            color: highlight
            forced-color-adjust: preserve-parent-color

            &:focus-visible
              outline-offset: 2px

            &.v-chip--variant-elevated,
            &.v-chip--variant-flat
              background-color: highlight
              color: highlighttext

            &.v-chip--variant-outlined,
            &.v-chip--variant-tonal
              border-width: medium

  // Modifiers
  .v-chip-group--column
    .v-slide-group__content
      white-space: normal
      flex-wrap: wrap
      max-width: 100%