@import '../../common/styles/colors';
@import '../../common/styles/text-base';

@steps-border-size: 1px;
@triangle-size: 9px;
@step-size: 26px;
@step-margin-right: 10px;
@step-horizontal-indent: @step-size + @step-margin-right;

@step-text-color: @color-gray-60;
@steps-border-color: @color-gray-10;
@circle-not-completed: @color-blue-30;
@circle-completed: @color-blue-50;

.triangle(@background-color) {
    position: absolute;
    bottom: 0;
    left: 50%;

    display: block;

    width: 0;
    height: 0;
    margin-left: -(@triangle-size);

    content: '';

    border-right: @triangle-size solid transparent;
    border-bottom: @triangle-size solid @background-color;
    border-left: @triangle-size solid transparent;
}

.bloko-stepwise {
    border-top: @steps-border-size solid @steps-border-color;
    border-bottom: @steps-border-size solid @steps-border-color;

    @media (max-width: 1019px) {
        border-top: 0;
    }
}

.bloko-stepwise_embeddable {
    border: 0;
}

.bloko-stepwise__steps {
    display: table;

    counter-reset: step;
}

.bloko-stepwise-step {
    .bloko-text-small();

    display: table-cell;

    box-sizing: border-box;
    padding: 16px 10px 14px;
    min-width: 160px;

    counter-increment: step;
    vertical-align: top;
    text-decoration: none;
    word-wrap: break-word;

    color: @step-text-color;

    &::before {
        .bloko-text-medium();

        display: block;
        float: left;

        box-sizing: border-box;
        width: @step-size;
        height: @step-size;
        margin-right: @step-margin-right;
        padding-top: 4px;

        content: counters(step, '.');
        text-align: center;
        line-height: 1.15;

        color: @circle-not-completed;
        border: 1px solid @circle-not-completed;
        border-radius: @step-size;
    }

    @media (max-width: 1019px) {
        border-top: 0;
        min-width: initial;
    }
}

.bloko-stepwise-step_done::before {
    content: '✓';

    color: @circle-completed;
    border-color: @circle-completed;
}

.bloko-stepwise-step_icon-only::before {
    float: none;
    margin: 0 auto;
}

.bloko-stepwise-step_link {
    color: @color-blue-40;
    text-decoration: none;
}

.bloko-stepwise-step_link:hover {
    text-decoration: none;
}

.bloko-stepwise-step_link:hover::before {
    content: counters(step, '.');
}

.bloko-stepwise-step_current {
    .bloko-text-strong();

    position: relative;

    color: @color-gray-80;
    background: @steps-border-color;

    @media (max-width: 1019px) {
        background: transparent;
    }
}

.bloko-stepwise-step_current::before {
    font-weight: normal;

    color: @color-white;
    border-color: @circle-completed;
    background: @circle-completed;
}

.bloko-stepwise-step_current::after {
    margin-bottom: -@steps-border-size;

    .triangle(@color-white);
}

.bloko-stepwise-step_icon-only::after {
    display: none;
}

.bloko-stepwise-step__title {
    display: block;

    min-height: 40px;

    margin-top: 5px;
    margin-left: @step-horizontal-indent;

    @media (max-width: 1019px) {
        display: none;
    }
}

.bloko-stepwise-step_current .bloko-stepwise-step__title::after {
    .triangle(@steps-border-color);
}

.bloko-stepwise-step__info {
    .bloko-text-small();

    display: block;
    margin-left: @step-horizontal-indent;
    color: @step-text-color;

    @media (max-width: 1019px) {
        display: none;
    }
}

.bloko-stepwise-step__info_nowrap {
    white-space: nowrap;
}

.bloko-stepwise-step_current .bloko-stepwise-step__title,
.bloko-stepwise-step_current .bloko-stepwise-step__info {
    @media (max-width: 1019px) {
        display: block;
    }
}