-var tabs = 4;

.container
  -while(tabs--)
    input(type="radio" name="tabs" id="tab_" + tabs)
    label(for="tab_" + tabs)
      .content Hello, I'm #

$bg: #000;
$tabs: 4;
$c-width: 500px;
$c-height: 300px;
$marker-width: 24px;
$indent: 6px;
$marker-height: $c-height/$tabs;
$tab-color: #E57373 #81C784 #64B5F6 #9575CD;
$easing: cubic-bezier(.11, .65, .04, 1);
$slide-time: 1.2s;
$content-time: $slide-time/3;

@mixin transition ($prop, $time) {
    -webit-transition: $prop $time $easing;
    transition: $prop $time $easing;
}

body {
    overflow: hidden;
    background: $bg;
    
    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        width: $c-width;
        height: $c-height;
        margin: -$c-height/2 0 -$c-width/2;
        counter-reset: tab-counter $tabs + 1;
        
        input[type=radio] {
            display: none;
            
            @for $i from 1 through $tabs { 
                &:checked + label ~ label:nth-child(#{2*$i}) {
                    width: ($tabs - $i)*$marker-width + $indent;
                    
                    & .content {
                        @include transition(opacity, $content-time);
                        opacity: 0;
                        pointer-events: none;
                    }
                }
                
                & + label {
                    position: absolute;
                    height: 100%;
                    box-shadow: 2px 0px 4px -2px $bg;
                    cursor: pointer;
                    @include transition(width, $slide-time);
                    
                    &:nth-child(2) {
                        box-shadow: none;
                    }

                    &:nth-child(#{2*$i}) {
                        $color: nth($tab-color, $tabs - $i + 1);
                        width: $c-width - ($i - 1)*$marker-width;
                        background: $color;
                        
                        @if ($i > 1) {
                            &:after {
                                position: absolute;
                                content: '';
                                top: percentage(($tabs - $i)*(100/$tabs)/100);
                                left: 100%;
                                width: $marker-width - $indent;
                                height: $marker-height;
                                border-radius: 0 $marker-height/10 $marker-height/10 0;
                                background: $color;
                                box-shadow: 3px 0px 6px -3px $bg;
                            }
                        }
                    }
                    
                    .content {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        width: $c-width/2;
                        margin-left: -$c-width/4;
                        counter-increment: tab-counter -1;
                        text-align: center;
                        
                        &:after {
                            content: counter(tab-counter);
                        }
                    }
                }
            } 
        }
    }
}