@import "lib/bootstrap/variables.scss"; //Core variables
@import "lib/bootstrap/mixins.scss"; //Core mixins

// Progress Form Body
// -----------------------------------------------------------------
.progress-form__form {
    .inline-block {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: $baseLineHeight / 2;
    }
    .row-inline-blocks {
        margin-bottom: 0;
    }
    #submitGroup-element {
        .btn {
            min-width: 120px;
        }
    }
    .table-responsive {
        input[type="text"],
        input[type="tel"],
        input[type="email"] {
            min-width: 200px;
            max-width: 100%;
        }
        .c_options {
            width: auto;
            white-space: nowrap;
            .btn {
                margin-bottom: 10px;
            }
        }
    }
}

// Progress Form Steps
// -----------------------------------------------------------------
.progress-form__steps {
    margin: 30px 0 10px;
    ul {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: step;
        overflow: hidden;

        li {
            display: block;
            position: relative;
            left: 0;
            float: left;
            padding: 0;
            list-style-type: none;
            font-family: $sansFontFamily;
            color: $accent;
            text-align: center;
            @include box-sizing (border-box);

            a, span {
                display: -ms-flex;
                display: -webkit-flex;
                display: flex;
                align-items: center;
                text-align: center;
                justify-content: center;
                font-size: 12px;
                line-height: 14px;
                font-weight: 400;
                height: 45px;
                width: 100%;
                color: $gray;
                padding-bottom: 25px;
            }

            &.active {
                a, span {
                    color: $darkYellow;
                }
            }

            &.selected {
                a, span {
                    font-size: 12px;
                    line-height: 14px;
                    height: 45px;
                    display: block;
                    width: 100%;
                    color: $accent;
                    position: relative;
                    z-index: 5;
                    padding-bottom: 10px;
                }
                a:hover {
                    color: $linkColorHover;
                }
                &:after {
                    position: relative;
                    bottom: 20px;
                    z-index: 1;
                }
                &:before {
                    bottom: 31.5px !important;
                }
            }

            &:after {
                content: counter(step);
                counter-increment: step;
                width: 12px;
                height:12px;
                line-height: 12px;
                display: block;
                font-size: 0;
                color: $black;
                background: $white;
                border-radius: 50%;
                border: 2px solid #777;
                margin: 0 auto 5px auto;
                position: relative;
                bottom: 20px;
                z-index: 1;
            }

            &:before {
                content: '';
                width: 100%;
                height: 2px;
                background: #ddd;
                position: absolute;
                left: -50%;
                bottom: 32px;
                z-index: 0; /*put it behind the numbers*/
            }

            &:first-child:before {
                /*connector not needed before the first step*/
                width: 50%;
                left: 0;
            }

            &:last-child:before {
                /*connector not needed before the first step*/
                width: 150%;
            }

            /*marking active/completed steps green*/
            /*The number of the step and the connector before it = green*/
            &.superactive span {
                font-size: 12px;
            }
            &.active:before, &.selected:before {
                border: 2px solid $darkYellow;
                -webkit-box-sizing:border-box;
                box-sizing:border-box;
                background: $darkYellow;
                bottom: 31px;
            }
            &.active:after, &.selected:after {
                background: $white;
                border-color: $darkYellow;
                color: $white;
            }
            &.completed a,
            &.completed span {
                color: darken($green, 10%) !important;
                &:hover {
                    color: $darkYellow !important;
                }
            }
            &.completed::before {
                border: 2px solid $green !important;
                background: $green !important;
                bottom: 30px;
            }
            &.completed::after {
                background: $green !important;
                border-color: $green!important;
                color: $white !important;
                font-family: "FontAwesome" !important;
                content: "\f00c" !important;
                font-size: 10px !important;
            }
        }
        &.steps-count-7 {
            li {
                width: calc(100% / 7);
            }
        }
        &.steps-count-6 {
            li {
                width: calc(100% / 6);
            }
        }
        &.steps-count-5 {
            li {
                width: calc(100% / 5);
            }
        }
        &.steps-count-4 {
            li {
                width: calc(100% / 4);
            }
        }
        &.steps-count-3 {
            li {
                width: calc(100% / 3);
            }
        }
        &.steps-count-2 {
            li {
                width: calc(100% / 2);
            }
        }
    }
}

// Progress Form Step Header
// -----------------------------------------------------------------
.progress-form__step-header {
    h3 {
        background: $darkYellow;
        color: $white;
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
        padding: 8px 14px;
        margin-bottom: 30px;
        @include border-radius(2px);

        span {
            float: right;
            font-size: 15px;
            font-weight: 400;
            line-height: 24px;
        }

        br { display: none;}
    }
}

// Progress Form IP
// -----------------------------------------------------------------
.progress-form__ip-address {
    padding: 7px 0;
    span {
        white-space: nowrap;
        &:nth-child(n+2)::before {
            content: '|';
            margin-right: 0.5em;
            margin-left: 0.4em;
        }
    }
}

// Progress Form Media Queries
// -----------------------------------------------------------------
@media all and (max-width: 768px) {
    .progress-form__steps {
        display: none;
    }
    .progress-form__form {
        #submitGroup-element {
            position: relative;
            padding-bottom: 50px;
            > div {
                &:first-child, &:last-child {
                    position: absolute;
                    bottom: 0;
                    width: auto;
                }
                &:first-child {
                    left: 0;
                }
                &:last-child {
                    right: 0;
                }
            }
        }
        .c_elements,
        .c_options {
            display: block;
            width: auto;
        }
    }
    .progress-form__ip-address {
        span {
            display: block;
            &:before {
                display: none;
            }
        }
    }
}


// -----------------------------------------------------------------
// Employee Progress Form
// -----------------------------------------------------------------
#employee-form {
    &.step-applicant {
        > dl {
            > dt, > dd {
                max-width: 700px;
                margin-left: auto;
                margin-right: auto;
                &#submitGroup-element {
                    max-width: none;
                }
            }
        }
    }
    &.step-payment {
        > dl {
            > dt, > dd {
                max-width: 500px;
                margin-left: auto;
                margin-right: auto;
                &#submitGroup-element {
                    max-width: none;
                }
            }
        }
    }
    #questionnaire-element {
        td {
            padding-left: 15px;
        }
    }
}