@import "_mixins", "_vars";

.box {
    @include box-sizing(border-box);
    //display: inline-block;
    margin-top: 0.3rem;
    overflow-x: auto;

    .inner {
        @include box-sizing(border-box);
        @include box-shadow-out(#ffffff);
        padding: 10px;
    }
}

.box-container {
    display: inline-block;
}

section.box {
    @include box-shadow-bottom(#f1f1f1);
    border: $content-box-border solid $content-box-border-color;
    background: $content-box-background-color;

    @each $tuple in
        'green' #42bd41, 'red' #d01715, 'blue' #5778fd,
        'orange' #FBA026, 'lightblue' #03a9f5, 'yellow' #ffeb3c, 'purple' #673bb7, 'pink' #ffa6e3, 'grey' #dcdcdc,
        'darkred' #B8312F, 'darkgreen' #009788, 'darkblue' #3f51b5 {
        &.#{nth($tuple, 1)} {
            border-top: 3px solid #{nth($tuple, 2)};
        }
    }
}

section {
    header {
        > h1 {
            margin: 10px 10px 0 10px;
            padding-bottom: 5px;
            font-size: 1.1em;
            text-shadow: 1px 1px 1px #ffffff;
            border-bottom: 1px solid #e1e1e1;
        }
    }

    > h2 {
        @include box-sizing(border-box);
        font-size: 1.2em;
        margin-bottom: 5px;
        text-shadow: 1px 1px 1px #ffffff;
    }
}