/* 
* Typography
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);


/*
* Color Variables
*/

$light-grey: #eee;
$med-grey: #666;
$dark-grey: #444;
$highlight-color: #1abc9c;


/*
* Animation Variables
*/

$timing: .4s;
$ease: cubic-bezier(0.865, 0.140, 0.095, 0.870);


/* 
* Global
*/

*,
*:before,
*:after {
    box-sizing: border-box;
}

/* 
* Base
*/

body {
    font-family: 'Open Sans', sans-serif;
    background: $light-grey;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    }

}


/*
* Accordion
*/

/* Basic Accordion Styles */
.accordion {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    box-shadow: 0 1px 8px rgba(#000, .25);


    /* Radio Inputs */
    input[name='panel'] {
        display: none;
    }

    /* Labels */
    label {
        position: relative;
        display: block;
        padding: 1em;
        background: linear-gradient(to bottom, rgba(254, 254, 254, 1) 0%, rgba(209, 209, 209, 1) 50%, rgba(219, 219, 219, 1) 55%, rgba(226, 226, 226, 1) 100%);
        border-top: 1px solid #fff;
        border-bottom: 1px solid rgba(#000, .15);
        box-shadow: inset 0 2px 0 #fff;
        font-size: 1.5em;
        text-shadow: 0 1px 0 rgba(#fff, .75);
        color: $med-grey;
        cursor: pointer;
        transition: all $timing $ease;

        &:after {
            content: '+';
            position: absolute;
            right: 1em;
            width: 1em;
            height: 1em;
            color: $light-grey;
            text-align: center;
            border-radius: 50%;
            background: $highlight-color;
            box-shadow: inset 0 1px 6px rgba(#000, .5), 0 1px 0 #fff;
            text-shadow: 0 1px 0 rgba(#000, .75);
        }

        &:hover {
            color: $highlight-color;
        }

    }

    input:checked+label {
        color: $highlight-color;

        &:after {
            content: '-';
            /* adjsut line-height to vertically center icon */
            line-height: .8em;
        }

    }

    /* Panel Content */
    .accordion__content {
        overflow: hidden;
        height: 0px;
        position: relative;
        padding: 0 1.5em;
        box-shadow: inset 4px 0 0 0 $highlight-color, inset 0 3px 6px rgba(#000, .75);
        background: $dark-grey;
        background: linear-gradient(to bottom, rgba(68, 68, 68, 1) 0%, rgba(34, 34, 34, 1) 100%);
        color: $light-grey;
        transition: height $timing $ease;

        &:not(:last-of-type) {
            box-shadow: inset 0 -2px 2px rgba(#000, .25), inset 4px 0 0 0 $highlight-color, inset 0 3px 6px rgba(#000, .75);
        }

        .accordion__header {
            padding: 1em 0;
        }

        .accordion__body {
            font-size: .825em;
            line-height: 1.4em;
        }

    }

}

/* 
* Size Variations
*/

input[name='panel']:checked~.accordion__content.accordion__content--small {
    height: 150px;
}

input[name='panel']:checked~.accordion__content.accordion__content--med {
    height: 200px;
}

input[name='panel']:checked~.accordion__content.accordion__content--large {
    height: 300px;
}