@import '../bootstrap'
@import '../theme'

v-navigation-drawer($material)
  background-color: $material.cards

  &:not(.v-navigation-drawer--floating)
    .v-navigation-drawer__border
      background-color: $material.dividers

  .v-divider
    border-color: $material.dividers

theme(v-navigation-drawer, "v-navigation-drawer")

.v-navigation-drawer
  bootable()

  display: block
  left: 0
  max-width: 100%
  overflow-y: auto
  overflow-x: hidden
  pointer-events: auto
  top: 0
  will-change: transform
  z-index: 3
  -webkit-overflow-scrolling: touch

  &[data-booted="true"]
    transition-property: transform, width

  &__border
    position: absolute
    right: 0
    top: 0
    height: 100%
    width: 1px

  &.v-navigation-drawer--right
    &:after
      left: 0
      right: initial

  &--right
    left: auto
    right: 0

    > .v-navigation-drawer__border
      right: auto
      left: 0

  &--absolute
    position: absolute

  &--fixed
    position: fixed

  &--floating:after
    display: none

  &--mini-variant
    overflow: hidden

    .v-list__group__header__prepend-icon
      flex: 1 0 auto
      justify-content: center
      width: 100%

    .v-list__tile__action,
    .v-list__tile__avatar
      justify-content: center
      min-width: 48px

    .v-list__tile__content,
    .v-list__tile:after
      opacity: 0

    .v-subheader,
    .v-divider,
    .v-list--group
      display: none !important

  &--temporary,
  &--is-mobile
    z-index: 6

    &:not(.v-navigation-drawer--close)
      elevation(16)

  .v-list
    background: inherit

  > .v-list
    .v-list__tile
      transition: none
      font-weight: $navigation-drawer-item-font-weight

      &--active
        .v-list__tile__title
          color: inherit

    .v-list--group
      .v-list__tile
        font-weight: $navigation-drawer-group-item-font-weight

      &__header--active
        &:after
          background: transparent

  > .v-list:not(.v-list--dense)
    .v-list__tile
      font-size: $navigation-drawer-item-font-size