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

@include tools.layer('components')
  .v-stepper-item
    margin: 0
    font: inherit
    overflow: visible
    text-transform: none
    background-color: transparent
    border-style: none
    color: inherit
    align-items: center
    align-self: stretch
    display: inline-flex
    flex: none
    outline: none
    opacity: $stepper-item-opacity
    padding: $stepper-item-padding
    position: relative
    transition-duration: $stepper-item-transition-duration
    transition-property: $stepper-item-transition-property
    transition-timing-function: $stepper-item-transition-timing-function

    @include tools.states('.v-stepper-item__overlay')

    .v-stepper--non-linear &
      opacity: var(--v-high-emphasis-opacity)

    &--selected
      opacity: 1

    &--error
      color: rgb(var(--v-theme-error))

    &--disabled
      opacity: var(--v-medium-emphasis-opacity)

    &[disabled],
    &--disabled
      pointer-events: none

    .v-stepper--alt-labels &
      flex-direction: column
      justify-content: flex-start
      align-items: center
      flex-basis: $stepper-alt-labels-flex-basis

  .v-stepper-item__avatar.v-avatar
    background: $stepper-item-avatar-background
    color: $stepper-item-avatar-color
    font-size: $stepper-item-avatar-font-size
    margin-inline-end: $stepper-item-avatar-margin-inline-end

    .v-stepper--mobile &
      margin-inline-end: 0

    .v-icon
      font-size: $stepper-item-avatar-icon-font-size

    .v-stepper-item--selected &,
    .v-stepper-item--complete &
      background: rgb(var(--v-theme-surface-variant))

    .v-stepper-item--error &
      background: rgb(var(--v-theme-error))

    .v-stepper--alt-labels &
      margin-bottom: $stepper-item-alt-labels-margin-bottom
      margin-inline-end: 0

  .v-stepper-item__content
    text-align: start

    .v-stepper--alt-labels &
      text-align: center

  .v-stepper-item__title
    line-height: $stepper-item-title-line-height

    .v-stepper--mobile &
      display: none

  .v-stepper-item__subtitle
    font-size: $stepper-item-subtitle-font-size
    line-height: $stepper-item-subtitle-line-height
    opacity: $stepper-item-subtitle-opacity

    .v-stepper--mobile &
      display: none

  .v-stepper-item__overlay
    background-color: currentColor
    border-radius: inherit
    opacity: 0
    transition: opacity .2s ease-in-out

  .v-stepper-item__overlay,
  .v-stepper-item__underlay
    pointer-events: none
    @include tools.absolute()