@import '../bootstrap'
@import '../theme'

v-stepper($material)
    background: $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($material.fg-color, $material.disabledORhints-text-percent)

        &__step
            color: $material.stepper.active

            .v-icon
                color: $material.stepper.active

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

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

        &--editable:hover
            background: rgba($material.fg-color, 0.06)

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

        &--complete
            .v-stepper__label
                color: $material.stepper.completed

        &--inactive
            &.v-stepper__step--editable:not(.v-stepper__step--error)
                &:hover
                    .v-stepper__step__step
                        background: $material.stepper.hover

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

        small
            color: rgba($material.fg-color, $material.secondary-text-percent)

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

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

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

theme(v-stepper, 'v-stepper')
rtl(v-stepper-rtl, 'v-stepper')

.v-stepper
    overflow: hidden
    position: relative
    elevation(2)

.v-stepper
    &__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

.v-stepper
    &__items
        position: relative
        overflow: hidden

.v-stepper
    &__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: 0.3s $transition.fast-in-fast-out

        .v-icon
            font-size: 18px

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

        &--active
            .v-stepper__label
                transition: 0.3s $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

.v-stepper
    &__label
        align-items: flex-start
        display: flex
        flex-direction: column
        text-align: left

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

.v-stepper
    &__wrapper
        overflow: hidden
        transition: none

.v-stepper
    &__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: 0.3s $transition.swing

.v-stepper
    &--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

/*
OVERRIDE
======================================
@media $display-breakpoints.sm-and-down
// ======================================
 */
+Override(sm-and-down)
    .v-stepper:not(.v-stepper--vertical)
        .v-stepper__label
            display: none

        .v-stepper__step__step
            margin-right: 0