.tab,
.step {
    display: block;
    height: 3.3em;
    padding: @padding-default-size-lg @padding-default-size-lg 0;
    margin: 0;
    border-bottom: 1px solid @color-dark-silver;
}

.tab .tab-item,
.step .step-item {
    display: inline-block;
    height: 2.4em;
    line-height: 2.4em;
    margin: 0 1.6em;
    padding: .4em 1.4em;
    vertical-align: bottom;
    border-bottom: 2px solid transparent;
    overflow: hidden;
    .transition(box-shadow .2s ease);
}

.tab .tab-item:hover,
.step .step-item:hover {
    .box-shadow(0 2px 6px rgba(0, 0, 0, .25));
}

.tab .tab-item:first-child,
.step .step-item:first-child {
    margin-left: 0;
}

.tab .tab-item:last-child,
.step .step-item:last-child {
    margin-right: 0;
}

.tab .tab-item.active,
.step .step-item.active {
    border-bottom-color: @base-primary-color;
    font-weight: 600;
}

.tab-container,
.step-container {
    padding: @padding-default-size-lg;
}

.tab-container .tab-container-item,
.step-container .step-container-item {
    display: none;
}

.tab-container .tab-container-item.active,
.step-container .step-container-item.active {
    display: block;
}

.works-section.works-section-padding {
    .tab,
    .step {
        padding-top: 0;
        margin-left: -@padding-default-size-lg;
        margin-right: -@padding-default-size-lg;
    }
}