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

@include tools.layer('components')
  .v-navigation-drawer
    -webkit-overflow-scrolling: $navigation-drawer-overflow-scrolling
    background: $navigation-drawer-background
    display: flex
    flex-direction: column
    height: $navigation-drawer-height
    max-width: 100%
    pointer-events: auto
    transition-duration: $navigation-drawer-transition-duration
    transition-property: $navigation-drawer-transition-property
    transition-timing-function: $navigation-drawer-transition-timing-function
    position: absolute

    @include tools.border($navigation-drawer-border...)
    @include tools.elevation($navigation-drawer-elevation)
    @include tools.rounded($navigation-drawer-border-radius)
    @include tools.theme($navigation-drawer-theme...)

    @media (prefers-reduced-motion: reduce)
      transition: none

    &--rounded
      @include tools.rounded($navigation-drawer-rounded-border-radius)

    &--top
      top: 0
      border-bottom-width: $navigation-drawer-border-thin-width

    &--bottom
      left: 0
      border-top-width: $navigation-drawer-border-thin-width

    &--left
      top: 0
      left: 0
      right: auto
      border-right-width: $navigation-drawer-border-thin-width

    &--right
      top: 0
      left: auto
      right: 0
      border-left-width: $navigation-drawer-border-thin-width

    &--floating
      border: none

    &--temporary.v-navigation-drawer--active
      @include tools.elevation($navigation-drawer-temporary-elevation)

    &--sticky
      height: auto
      transition: box-shadow, transform, visibility, width, height, left, right

    .v-list
      overflow: hidden

  .v-navigation-drawer__content
    flex: 0 1 auto
    height: $navigation-drawer-content-height
    max-width: 100%
    overflow-x: $navigation-drawer-content-overflow-x
    overflow-y: $navigation-drawer-content-overflow-y

  .v-navigation-drawer__img
    height: 100%
    left: 0
    position: absolute
    top: 0
    width: 100%
    z-index: -1

    // TODO: remove in v4
    img:not(.v-img__img)
      height: $navigation-drawer-img-height
      object-fit: $navigation-drawer-img-object-fit
      width: $navigation-drawer-img-width

  .v-navigation-drawer__scrim
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: black
    opacity: $navigation-drawer-scrim-opacity
    transition: opacity $navigation-drawer-transition-duration $navigation-drawer-transition-timing-function
    z-index: 1

  .v-navigation-drawer__prepend,
  .v-navigation-drawer__append
    flex: none
    overflow: hidden