<div class="container">
        <header>
            <h1>Pure <strong>CSS</strong> Progress</h1>
            <p>... a pretty liquid progress-bar.</p>
        </header>
        <section>
            <article>
                <input type="radio" name="switch-color" id="red" checked>
                <input type="radio" name="switch-color" id="cyan">
                <input type="radio" name="switch-color" id="lime">
                <div class="chart">
                    <div class="bar bar-75 white">
                        <div class="face top">
                            <div class="growing-bar"></div>
                        </div>
                        <div class="face side-0">
                            <div class="growing-bar"></div>
                        </div>
                        <div class="face floor">
                            <div class="growing-bar"></div>
                        </div>
                        <div class="face side-a"></div>
                        <div class="face side-b"></div>
                        <div class="face side-1">
                            <div class="growing-bar"></div>
                        </div>
                    </div>
                </div>
                <p>Try another color :)</p>
                <nav class="actions">
                    <label for="red">Red</label>
                    <label for="cyan">Cyan</label>
                    <label for="lime">Lime</label>
                </nav>
            </article>
            <article>
                <input type="radio" name="switch-pos" id="pos-0">
                <input type="radio" name="switch-pos" id="pos-1">
                <input type="radio" name="switch-pos" id="pos-2" checked>
                <input type="radio" name="switch-pos" id="pos-3">
                <div class="chart">
                    <div class="bar bar-30 white">
                        <div class="face top">
                            <div class="growing-bar"></div>
                        </div>
                        <div class="face side-0">
                            <div class="growing-bar"></div>
                        </div>
                        <div class="face floor">
                            <div class="growing-bar"></div>
                        </div>
                        <div class="face side-a"></div>
                        <div class="face side-b"></div>
                        <div class="face side-1">
                            <div class="growing-bar"></div>
                        </div>
                    </div>
                </div>
                <p>Try another position :)</p>
                <nav class="actions">
                    <label for="pos-0">1/4</label>
                    <label for="pos-1">2/4</label>
                    <label for="pos-2">3/4</label>
                    <label for="pos-3">Full</label>
                </nav>
            </article>
            <article>
                <input type="radio" name="exercises" id="exercise-1" checked>
                <input type="radio" name="exercises" id="exercise-2">
                <input type="radio" name="exercises" id="exercise-3">
                <input type="radio" name="exercises" id="exercise-4">
                <div class="chart grid">
                    <div class="exercise second">
                        <div class="bar bar-45 navy lightGray-face">
                            <div class="face top">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face side-0">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face floor">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face side-a"></div>
                            <div class="face side-b"></div>
                            <div class="face side-1">
                                <div class="growing-bar"></div>
                            </div>
                        </div>
                        <div class="bar bar-80 yellow lightGray-face">
                            <div class="face top">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face side-0">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face floor">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face side-a"></div>
                            <div class="face side-b"></div>
                            <div class="face side-1">
                                <div class="growing-bar"></div>
                            </div>
                        </div>
                        <div class="bar bar-60 red lightGray-face">
                            <div class="face top">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face side-0">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face floor">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face side-a"></div>
                            <div class="face side-b"></div>
                            <div class="face side-1">
                                <div class="growing-bar"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <p><em>It's liquid</em>, so adding a bit of code you can make charts like this :P</p>
                <nav class="actions">
                    <label for="exercise-1">E-1</label>
                    <label for="exercise-2">E-2</label>
                    <label for="exercise-3">E-3</label>
                    <label for="exercise-4">E-4</label>
                </nav>
            </article>
        </section>
    </div> 

@import 'compass/reset';
@import 'compass/css3';
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
$yellow: #f1c40f;
$lime: #76c900;
$navy: #0a4069;
$cyan: #57caf4;
$red: #ec008c;
$white: #fefefe;
$gray: #444;
$lightGray: lighten($gray, 30);

$transitionDuration: .3s;
$transition: all $transitionDuration ease-in-out;

body
{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1em;

    text-align: center;

    color: $gray;
    background: #d0d0d0;
}
h1
{
    font-size: 2.5em;

    margin: 2em 0 .5em;
}
h2
{
    margin-bottom: 3em;
}
em,
strong
{
    font-weight: 700;
}
input
{
    display: none;
}
header p 
{
    margin-bottom: 0;
}
section
{
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 2em;
    padding: 0;
    &:last-of-type
    {
        margin-bottom: 0;
    }
    article 
    {
        align-self: center;
        width: 20em;
        margin-bottom: 2em;
        p,
        &:last-of-type
        {
            margin-bottom: 0;
        }
    }
}
p
{
    line-height: 1.5em;

    max-width: 20em;
    margin: 1.5em auto 2em;
    padding-bottom: 1.5em;
    span
    {
        display: block;
    }
}
.container
{
    z-index: 1;
    display: flex;
    overflow: hidden;
    flex-direction: column;

    justify-content: center;

    margin-bottom: 4em;
}

/*
*
*
START // CHART'S RULES
 -> "if you're picking code, don't forget the variables :)"
*/

.chart
{
    font-size: 1em;

    perspective: 1000px;
    perspective-origin: 50% 50%;
    backface-visibility: visible;
}

$faceColor: rgba($white, .3);
$growColor: rgba($red, .6);

.bar
{
    font-size: 1em;

    position: relative;

    height: 10em;

    transition: $transition;
    transform: rotateX(60deg) rotateY(0deg);

    transform-style: preserve-3d;

    .face
    {
        font-size: 2em;

        position: relative;

        width: 100%;
        height: 2em;

        background-color: $faceColor;

        &.side-a,
        &.side-b
        {
            width: 2em;
        }
    }
    .side-a
    {
        transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
    }
    .side-b
    {
        transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);
        position: absolute;
        right: 0;
    }
    .side-0
    {
        transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
    }
    .side-1
    {
        transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
    }
    .top
    {
        transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
    }
    .floor
    {
        box-shadow: 0 .1em 0.6em rgba(0,0,0,.3), .6em -0.5em 3em rgba(0,0,0,.3), 1em -1em 8em $white;
    }
}

.growing-bar
{
    transition: $transition;
    background-color: $growColor;
    width: 100%;
    height: 2em;
}

@mixin drawSkin($color, $name)
{
    .bar.#{$name}
    {
        .side-a,
        // &.bar-100 .side-b,
        .growing-bar
        {
            background-color: rgba($color, .6);
        }
        .side-0 .growing-bar
        {
            box-shadow: -0.5em -1.5em 4em $color;
        }
        .floor .growing-bar
        {
            box-shadow: 0em 0em 2em $color;
        }
    }
}

@mixin drawFaces($color, $name)
{
    .chart .bar.#{$name} .face
    {
        background-color: rgba($color, .2);
    }
}

@include drawSkin(rgba($yellow, .8), 'yellow');
@include drawSkin(rgba($red, .8), 'red');
@include drawSkin($cyan, 'cyan');
@include drawSkin(rgba($navy, .8), 'navy');
@include drawSkin($lime, 'lime');
@include drawSkin($white, 'white');
@include drawSkin($gray, 'gray');

@include drawFaces(rgba($yellow, .6), 'yellow-face');
@include drawFaces($lime, 'lime-face');
@include drawFaces(rgba($red, .6), 'red-face');
@include drawFaces(rgba($navy, .6), 'navy-face');
@include drawFaces($cyan, 'cyan-face');
@include drawFaces($gray, 'gray-face');
@include drawFaces($lightGray, 'lightGray-face');

@for $i from 0 to 101
{
    .bar-#{$i}
    {
        .growing-bar
        {
            width: percentage($i/100);
        }
    }
}

/*
END // CHART'S RULES
*
*
*/

.chart.grid
{
    display: flex;
    flex-direction: row;
    .exercise 
    {

        flex: 0 0 100%;
        display: flex;
        .bar
        {
            flex: 1;
            margin: 0 .5em;
            &:nth-child(2)
            {
                z-index: 8;
                flex: 1 0 40%;
            }
            &:first-child
            {
                z-index: 10;
                margin-left: 0;
            }
            &:last-child
            {
                margin-right: 0;
            }
        }
    }
}

.actions
{
    display: flex;

    justify-content: center;

    margin-bottom: 0;
    padding-bottom: 2em;
    border-bottom: 1px dotted rgba($gray, .4);
}
label
{
    box-sizing: border-box;
    padding: 1em;
    margin: 0 .2em;

    cursor: pointer;
    transition: all .15s ease-in-out;

    color: $navy;
    border: 1px solid rgba($white, .6);
    border-radius: 0;

    flex: 1;
    &:first-child
    {
        margin-left: 0;

        border-radius: .2em 0 0 .2em;
    }
    &:last-child
    {
        margin-right: 0;

        border-radius: 0 .2em .2em 0;
    }
}

input[id='exercise-1']:checked ~ .actions label[for='exercise-1'],
input[id='exercise-2']:checked ~ .actions label[for='exercise-2'],
input[id='exercise-3']:checked ~ .actions label[for='exercise-3'],
input[id='exercise-4']:checked ~ .actions label[for='exercise-4'],

input[id='pos-0']:checked ~ .actions label[for='pos-0'],
input[id='pos-1']:checked ~ .actions label[for='pos-1'],
input[id='pos-2']:checked ~ .actions label[for='pos-2'],
input[id='pos-3']:checked ~ .actions label[for='pos-3'],

input[id='red']:checked ~ .actions label[for='red'],
input[id='cyan']:checked ~ .actions label[for='cyan'],
input[id='lime']:checked ~ .actions label[for='lime']
{
    color: $lime;
    border: 1px solid darken($navy, 15);
    background-color: $navy;
}


input[id='red']:checked ~ .chart
{
    @extend .bar.red;
}
input[id='cyan']:checked ~ .chart
{
    @extend .bar.cyan;
}
input[id='lime']:checked ~ .chart
{
    @extend .bar.lime;
}

input[id='pos-0']:checked ~ .chart
{
    @extend .bar-25;
}
input[id='pos-1']:checked ~ .chart
{
    @extend .bar-50;
}
input[id='pos-2']:checked ~ .chart
{
    @extend .bar-75;
}
input[id='pos-3']:checked ~ .chart
{
    @extend .bar-100;
}
input[id='exercise-2']:checked ~ .chart.grid
{
    .exercise  .bar
    {
        &:nth-child(1)
        {
            flex: 1 0 0%;
            @extend .bar-20;
        }
        &:nth-child(2)
        {
            flex: 1;
            @extend .bar-50;
        }
        &:nth-child(3)
        {
            flex: 1 0 30%;
            @extend .bar-80;
        }
    }
}
input[id='exercise-3']:checked ~ .chart.grid
{
    .exercise  .bar
    {
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3)
        {
            flex: 1;
            @extend .bar-70;
        }
    }
}
input[id='exercise-4']:checked ~ .chart.grid
{
    .exercise  .bar
    {
        &:nth-child(1),
        &:nth-child(2)
        {
            flex: 1 0 30%;
            @extend .bar-50;
        }
        &:nth-child(3)
        {
            flex: 1;
            @extend .bar-100;
        }
    }
}