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

.v-stepper-item
  align-items: center
  align-self: stretch
  display: inline-flex
  flex: none
  opacity: $stepper-item-opacity
  padding: $stepper-item-padding
  transition-duration: $stepper-item-transition-duration
  transition-property: $stepper-item-transition-property
  transition-timing-function: $stepper-item-transition-timing-function

  &--selected
    opacity: 1

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

  &--disabled
    opacity: var(--v-medium-emphasis-opacity)
    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-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
  .v-stepper--alt-labels &
    // min-height: 28px

.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
  text-align: left
  line-height: $stepper-item-subtitle-line-height
  opacity: $stepper-item-subtitle-opacity

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

  .v-stepper--mobile &
    display: none