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

@include tools.layer('components')
  .v-stepper.v-sheet
    overflow: hidden
    @include tools.elevation($stepper-elevation)
    @include tools.rounded($stepper-border-radius)

    &.v-stepper--flat
      @include tools.elevation(0)

  .v-stepper-header
    align-items: center
    display: flex
    position: relative
    overflow-x: auto
    justify-content: space-between
    z-index: 1
    @include tools.elevation($stepper-header-elevation)

    .v-divider
      margin: $stepper-header-divider-margin

      &:last-child
        margin-inline-end: 0

      &:first-child
        margin-inline-start: 0

    .v-stepper--alt-labels &
      height: auto

      .v-divider
        align-self: flex-start
        margin: $stepper-alt-labels-header-divider

  .v-stepper-window
    margin: $stepper-window-margin

  .v-stepper-actions
    display: flex
    align-items: center
    justify-content: space-between
    padding: $stepper-actions-padding

    .v-stepper &
      padding: $stepper-actions-stepper-padding

    .v-stepper-window-item &
      padding: $stepper-actions-stepper-window-item-padding