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

@include tools.layer('components')
  .v-video-volume
    &--inline
      display: flex
      align-items: center

    &__menu
      background: rgb(var(--v-theme-surface))
      color: rgb(var(--v-theme-on-surface))
      overflow: hidden
      display: flex
      align-items: center
      justify-content: center

      @include tools.border($video-volume-menu-border...)
      @include tools.elevation($video-volume-menu-elevation)
      @include tools.rounded($video-volume-menu-border-radius)

      &:has(.v-input--horizontal)
        height: $video-volume-horizontal-menu-height

      &:has(.v-input--vertical)
        width: $video-volume-vertical-menu-width

      .v-slider.v-input--horizontal
        margin: $video-volume-horizontal-margin
        width: $video-volume-horizontal-menu-width
        height: $video-volume-horizontal-menu-height

      .v-slider.v-input--vertical
        margin: $video-volume-vertical-margin
        height: $video-volume-vertical-menu-height
        width: $video-volume-vertical-menu-width

        > .v-input__control
          // just smaller than 300px default
          min-height: 50px