.wizard {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-bottom: @padding-default-size-lg;
    border-collapse: collapse;
    overflow: hidden;

    .wizard-item {
        display: table-cell;
        height: 2.8em;
        text-align: center;
        vertical-align: middle;
        position: relative;
        background-color: @base-cobalt-color;
        color: @base-white-color;

        &:hover {
            color: @base-white-color;
            background-color: lighten(@base-cobalt-color, 5%);
        }

        &:after {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            content: '';
            border-top: 1.4em solid transparent;
            border-right: 1.4em solid transparent;
            border-bottom: 1.4em solid transparent;
            border-left: 1.4em solid @font-normal-color;
        }

        &:before {
            display: block;
            position: absolute;
            top: 0;
            left: -1px;
            bottom: 0;
            content: '';
            border-top: 1.4em solid transparent;
            border-right: 1.4em solid transparent;
            border-bottom: 1.4em solid transparent;
            border-left: 1.4em solid @base-cobalt-color;
            z-index: 3;
        }

        &:first-child {
            border-radius: 3px 0 0 3px;

            &:after,
            &:before {
                display: none;
            }
        }

        &:last-child {
            border-radius: 0 3px 3px 0;
        }


        &.active ~ .wizard-item {
            background-color: @color-light-bg;
            color: @base-cobalt-color;
        }

        &.active ~ .wizard-item:hover {
            background-color: @color-light-bg;
        }

        &.active ~ .wizard-item:after {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            content: '';
            border-top: 1.4em solid transparent;
            border-right: 1.4em solid transparent;
            border-bottom: 1.4em solid transparent;
            border-left: 1.4em solid @color-dark-silver;
        }

        &.active ~ .wizard-item:before {
            display: block;
            position: absolute;
            top: 0;
            left: -1px;
            bottom: 0;
            content: '';
            border-top: 1.4em solid transparent;
            border-right: 1.4em solid transparent;
            border-bottom: 1.4em solid transparent;
            border-left: 1.4em solid @color-light-bg;
            z-index: 3;
        }

        &.active + .wizard-item:after {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            content: '';
            border-top: 1.4em solid transparent;
            border-right: 1.4em solid transparent;
            border-bottom: 1.4em solid transparent;
            border-left: 1.4em solid @base-cobalt-color;
        }

        &.active + .wizard-item:before {
            display: none;
        }

        &.active:hover + .wizard-item:after {
            border-left-color: lighten(@base-cobalt-color, 5%);
        }

        &.active ~ .wizard-item:hover {
            background-color: @color-light-bg;
        }

        &.active ~ .wizard-item:hover + &:before {
            border-left-color: @color-light-bg;
        }
    }
}
