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

.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
  will-change: $navigation-drawer-will-change
  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...)

  &--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
    @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

  img
    height: $navigation-drawer-img-height
    object-fit: $navigation-drawer-img-object-fit
    width: $navigation-drawer-img-width

.v-navigation-drawer__scrim
  position: absolute
  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