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

@include tools.layer('components')
  .v-carousel
    overflow: hidden
    position: relative
    width: 100%

    &__controls
      align-items: center
      bottom: 0
      display: flex
      height: $carousel-controls-size
      justify-content: center
      list-style-type: none
      position: absolute
      width: 100%
      z-index: 1

      @include tools.theme($carousel-controls-theme...)

      > .v-item-group
        flex: 0 1 auto

      &__item
        margin: $carousel-dot-margin

        .v-icon
          opacity: $carousel-dot-inactive-opacity

        &--active
          .v-icon
            opacity: $carousel-dot-active-opacity
            vertical-align: middle

        &:hover
          background: none

          .v-icon
            opacity: $carousel-dot-hover-opacity

  // Element
  .v-carousel__progress
    margin: 0
    bottom: 0
    left: 0
    right: 0

  .v-carousel-item
    display: block
    height: inherit
    text-decoration: none

    & > .v-img
      height: inherit

  // Modifier
  .v-carousel--hide-delimiter-background
    .v-carousel__controls
      background: transparent

  .v-carousel--vertical-delimiters
    .v-carousel__controls
      flex-direction: column
      height: 100%
      width: $carousel-controls-size