.q-stepper
  border-radius $generic-border-radius
  box-shadow $shadow-2

.q-stepper-title
  font-size 14px
.q-stepper-subtitle
  font-size 12px
  opacity .7

.q-stepper-dot
  margin-right 8px
  font-size 14px
  width 24px
  height 24px
  border-radius 50%
  background currentColor
  span
    color white

.q-stepper-tab
  padding 24px
  font-size 14px
  flex-direction row
  transition color .28s, background .28s

  &.step-waiting
    color black
    .q-stepper-dot
      color $stepper-label-inactive-color
  &.step-navigation
    user-select none
    cursor pointer
    &:active
      background $stepper-active-background !important
  &.step-color
    color currentColor
  &.step-active .q-stepper-title
    font-weight bold
  &.step-disabled
    color $stepper-label-inactive-color
  &.step-error
    color $negative
    color var(--q-color-negative)
    .q-stepper-dot
      background transparent
      span
        color $negative
        color var(--q-color-negative)
        font-size 24px

.q-stepper-header
  min-height 72px
  &:not(.alternative-labels)
    .q-stepper-tab
      justify-content center
    .q-stepper-dot:after
      display none
  &.alternative-labels
    min-height 104px
    .q-stepper-tab
      padding 24px 32px
      flex-direction column
      justify-content flex-start
    .q-stepper-dot
      margin-right 0
    .q-stepper-label
      margin-top 8px
      text-align center
      &:before, &:after
        display none

.q-stepper-step-content
  color black

.q-stepper-horizontal
  .q-stepper-step-inner
    padding 24px
  .q-stepper-nav
    margin 0 16px 8px
  .q-stepper-step .q-stepper-nav
    margin 16px 0 0
    > div.col
      display none

  .q-stepper-first .q-stepper-dot:before,
  .q-stepper-last .q-stepper-label:after,
  .q-stepper-last .q-stepper-dot:after
    display none
  .q-stepper-tab
    overflow hidden
  .q-stepper-line
    &:before, &:after
      position absolute
      top 50%
      height 1px
      width 100vw
      background $stepper-divider-color
  .q-stepper-label:after, .q-stepper-dot:after
    content ''
    left 100%
    margin-left 8px
  .q-stepper-dot:before
    content ''
    right 100%
    margin-right 8px

.q-stepper-vertical
  padding 8px 0 18px
  .q-stepper-tab
    padding 12px 16px
  .q-stepper-label
    padding-top 4px
  .q-stepper-title
    line-height 18px
  .q-stepper-step-inner
    padding 0 24px 24px 48px
  .q-stepper-nav
    margin-top 16px
    > div.col
      display none

  .q-stepper-first .q-stepper-dot:before,
  .q-stepper-last .q-stepper-dot:after
    display none
  .q-stepper-step
    overflow hidden
  .q-stepper-dot
    &:before, &:after
      content ''
      position absolute
      left 50%
      width 1px
      height 100vh
      background $stepper-divider-color
  .q-stepper-dot:before
    bottom 100%
    margin-bottom 8px
  .q-stepper-dot:after
    top 100%
    margin-top 8px

body.desktop .q-stepper-tab.step-navigation:hover
  background $stepper-hover-background

@media (max-width $breakpoint-sm-max)
  .q-stepper-horizontal.q-stepper-contractable
    .q-stepper-header
      min-height 72px
    .q-stepper-tab
      padding 24px 0
    .q-stepper-tab:not(:last-child)
      .q-stepper-dot:after
        display block !important
    .q-stepper-dot
      margin 0
    .q-stepper-label
      display none