@use 'sass:math'
@use 'sass:map'
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  // Block
  .v-slide-group
    display: flex
    overflow: hidden

  // Element
  .v-slide-group__next,
  .v-slide-group__prev
    align-items: center
    display: flex
    flex: 0 1 $slide-group-prev-basis
    justify-content: center
    min-width: $slide-group-prev-basis
    cursor: pointer

    &--disabled
      pointer-events: none
      opacity: var(--v-disabled-opacity)

  .v-slide-group__content
    display: flex
    flex: 1 0 auto
    position: relative
    transition: 0.2s all settings.$standard-easing
    white-space: nowrap

    > *
      white-space: initial

  .v-slide-group__container
    contain: content
    display: flex
    flex: 1 1 auto
    overflow-x: auto
    overflow-y: hidden

    scrollbar-width: none
    scrollbar-color: rgba(0, 0, 0, 0)

    &::-webkit-scrollbar
      display: none

  // Modifiers
  .v-slide-group--vertical
    max-height: inherit

    &,
    .v-slide-group__container,
    .v-slide-group__content
      flex-direction: column

    .v-slide-group__container
      overflow-x: hidden
      overflow-y: auto