@import '../../styles/styles.sass'
@import './_variables.scss'

+theme(v-stepper) using ($material)
  background: map-get($material, 'bg-color')

  .v-stepper__step
    &:not(.v-stepper__step--active):not(.v-stepper__step--complete):not(.v-stepper__step--error)
      .v-stepper__step__step
        background: rgba(map-get($material, 'fg-color'), map-get($material, 'disabledORhints-text-percent'))

    &__step
      color: map-deep-get($material, 'stepper', 'active')

      .v-icon
        color: map-deep-get($material, 'stepper', 'active')

  .v-stepper__header
    .v-divider
      border-color: rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))

  .v-stepper__step
    &--active
      .v-stepper__label
        text-shadow: 0px 0px 0px rgba(map-get($material, 'fg-color'), 1)

    &--editable:hover
      background: rgba(map-get($material, 'fg-color'), .06)

      .v-stepper__label
        text-shadow: 0px 0px 0px rgba(map-get($material, 'fg-color'), 1)

    &--complete
      .v-stepper__label
        color: map-deep-get($material, 'stepper', 'completed')

    &--inactive
      &.v-stepper__step--editable:not(.v-stepper__step--error)
        &:hover
          .v-stepper__step__step
            background: map-deep-get($material, 'stepper', 'hover')

  .v-stepper__label
    color: rgba(map-get($material, 'fg-color'), map-get($material, 'disabledORhints-text-percent'))

    small
      color: rgba(map-get($material, 'fg-color'), map-get($material, 'secondary-text-percent'))

  &--non-linear
    .v-stepper__step:not(.v-stepper__step--complete):not(.v-stepper__step--error)
      .v-stepper__label
        color: rgba(map-get($material, 'fg-color'), map-get($material, 'secondary-text-percent'))

  &--vertical
    .v-stepper__content:not(:last-child)
      border-left: 1px solid rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))

.v-stepper
  border-radius: $stepper-border-radius
  overflow: hidden
  position: relative
  +elevation(2)

  &__header
    height: 72px
    align-items: stretch
    display: flex
    flex-wrap: wrap
    justify-content: space-between
    +elevation(2)

    .v-divider
      align-self: center
      margin: 0 -16px

  &__items
    position: relative
    overflow: hidden

  &__step__step
    align-items: center
    border-radius: 50%
    display: inline-flex
    font-size: 12px
    justify-content: center
    height: 24px
    margin-right: 8px
    min-width: 24px
    width: 24px
    transition: .3s map-get($transition, 'fast-in-fast-out')

    .v-icon.v-icon
      font-size: 18px

  &__step
    align-items: center
    display: flex
    flex-direction: row
    padding: 24px
    position: relative

    &--active
      .v-stepper__label
        transition: .3s map-get($transition, 'ease-in-out')

    &--editable
      cursor: pointer

    &.v-stepper__step--error
      .v-stepper__step__step
        background: transparent
        color: inherit

        .v-icon
          font-size: 24px
          color: inherit

      .v-stepper__label
        color: inherit
        text-shadow: none
        font-weight: 500

        small
          color: inherit

  &__label
    align-items: flex-start
    display: flex
    flex-direction: column
    line-height: 1
    text-align: left

    small
      font-size: 12px
      font-weight: 300
      text-shadow: none

  &__wrapper
    overflow: hidden
    transition: none

  &__content
    top: 0
    padding: 24px 24px 16px 24px
    flex: 1 0 auto
    // Chrome has an issue with overflow hidden for rendering
    // Originally used translateZ but this messes up fixed
    // elements within the stepper
    // Fix for #512 and #620
    // overflow: hidden
    width: 100%

    > .v-btn
      margin: 24px 8px 8px 0

  &--is-booted
    .v-stepper__content, .v-stepper__wrapper
      transition: .3s map-get($transition, 'swing')

  &--vertical
    padding-bottom: 36px

    .v-stepper__content
      margin: -8px -36px -16px 36px
      padding: 16px 60px 16px 23px
      width: auto

    .v-stepper__step
      padding: 24px 24px 16px

    .v-stepper__step__step
      margin-right: 12px

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

      .v-divider
        margin: 35px -67px 0
        align-self: flex-start

    .v-stepper__step
      flex-direction: column
      justify-content: flex-start
      align-items: center
      flex-basis: 175px

      small
        align-self: center

    .v-stepper__step__step
      margin-right: 0
      margin-bottom: 11px

  +rtl()
    .v-stepper__step__step
      margin-right: 0
      margin-left: 12px

@media #{map-get($display-breakpoints, 'sm-and-down')}
  .v-stepper:not(.v-stepper--vertical)
    .v-stepper__label
      display: none

    .v-stepper__step__step
      margin-right: 0