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

// Block
.v-toolbar
  align-items: flex-start
  display: flex
  flex: $toolbar-flex
  flex-direction: column
  justify-content: space-between
  max-width: 100%
  overflow: hidden
  position: relative
  transition: $toolbar-transition
  transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow
  width: 100%

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

  &--absolute
    position: absolute

  &--collapse
    max-width: $toolbar-collapsed-max-width
    overflow: hidden
    border-end-end-radius: $toolbar-collapsed-border-radius

    .v-toolbar-title
      display: none

  &--flat
    @include tools.elevation($toolbar-flat-elevation)

  &--floating
    display: inline-flex

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

.v-toolbar__content,
.v-toolbar__extension
  align-items: center
  display: flex
  flex: 0 0 auto
  position: relative
  transition: inherit
  width: 100%

.v-toolbar__content
  > .v-btn:first-child
    margin-inline-start: $toolbar-prepend-btn-margin-start

  > .v-btn:last-child
    margin-inline-end: $toolbar-append-btn-margin-end

  > .v-toolbar-title
      margin-inline-start: $toolbar-title-margin

  .v-toolbar--density-prominent &
    align-items: flex-start

.v-toolbar__image
  @include tools.absolute()

  display: flex
  opacity: var(--v-toolbar-image-opacity, 1)
  transition-property: opacity

.v-toolbar__prepend,
.v-toolbar__append
  align-items: center
  align-self: stretch
  display: flex

.v-toolbar__prepend
  margin-inline: $toolbar-prepend-btn-margin-start auto

.v-toolbar__append
  margin-inline: auto $toolbar-append-btn-margin-end

.v-toolbar-title
  flex: 1 1
  font-size: $toolbar-title-font-size
  min-width: 0

  @include tools.typography($toolbar-title-typography...)

  .v-toolbar--density-prominent &
    align-self: flex-end
    padding-bottom: 6px

    @include tools.typography($toolbar-prominent-title-typography...)

.v-toolbar-title__placeholder
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.v-toolbar-items
  display: flex
  height: inherit
  align-self: stretch

  > .v-btn
    border-radius: 0