/*------------------------------------*\
    #BOX
\*------------------------------------*/

$box-bg-color:       $white !default;
$box-border-color:   $border-color !default;
$box-head-bg-color:  $off-white !default;
$box-body-color:     $dark-gray !default;
$box-body-padding:   $spacing-unit * 2 !default;

$box-padding:            16px !default;
$box-heading-font-size:  14px !default;

$box-rounded-border-radius:  $global-border-radius !default;


.box {
    margin-bottom: $vertical-margin;
    background: $box-bg-color;
    border: 1px solid $box-border-color;
}

.box--rounded {
    border-radius: $box-rounded-border-radius;
}

.box--padded {
    padding: $spacing-unit;
}


    .box__head {
        padding: $box-padding;
        background: $box-head-bg-color;
        border-bottom: 1px solid $box-border-color;
    }

        .box__heading {
            margin: 0;
            font-size: $box-heading-font-size;
            font-weight: bold;
        }


    .box__body {
        color: $box-body-color;
        padding: $box-padding;

        .box--no-padding & {
            padding: 0;
        }
    }

    .box__body--pad-top {
        padding-top: $box-body-padding;
    }

        .box__actions {
            text-align: right;
        }

        .box__section {
            & + & {
                margin-top: $spacing-unit * 2;
                padding-top: $spacing-unit * 2;
                border-top: 1px dashed $box-border-color;
            }
        }