// Boxes

@mixin box($text-color: inherit, $background-color: $color-light, $border-color: $color-mid, $text-color-reversed: white, $background-color-reversed: $color-accent) {

    // Default box does not have a background color
    background-color: inherit;

    border-radius: $box-border-radius;
    box-sizing: border-box;
    color: $text-color;
    font-weight: inherit;
    font-size: inherit;
    border: $rule-thickness solid $border-color;
    margin: $line-height-default 0;
    padding: ($line-height-default / 2);

    & p:last-child,
    & ol:last-child,
    & ul:last-child {
        margin-bottom: 0;
    }

    // No text-indent on paragraphs after boxes
    & + p {
        text-indent: 0;
    }

    // No indent on first paragraphs in boxes
    & p:first-of-type {
        text-indent: 0;
    }

    // No margin above the first headings in a box
    h1:first-of-type, 
    h2:first-of-type, 
    h3:first-of-type, 
    h4:first-of-type, 
    h5:first-of-type, 
    h6:first-of-type {
        margin-top: 0;
    }

    li {
        // Paragraphs within list items in a box
        p:last-of-type {
            margin-bottom: 0;
        }
    }

    // Definition lists inside a box
    dl {
        &:first-of-type {
            margin-top: 0;
        }
        &:last-of-type {
            margin-bottom: 0;
        }
    }

    // Different kinds of box

    &.box-shaded {
        border: $background-color;
        background-color: $background-color;
    }

    &.box-reversed {
        border: $background-color-reversed;
        background-color: $background-color-reversed;
        color: $text-color-reversed;
    }
}

$epub-boxes: true !default;
@if $epub-boxes {

    .box {
        @include box();
    }

    // A regular paragraph as a box
    p.box {
        text-indent: 0;
    }

    // A list as a box
    ol.box,
    ul.box {
        padding: ($line-height-default / 2) ($line-height-default / 2) ($line-height-default / 2) ($line-height-default);
    }

    // A regular list item as a box
    li.box {}

    // Expandable boxes
    .expandable-box {
        @include box();

        h3:first-child,
        h4:first-child,
        h5:first-child,
        h6:first-child {
            font-style: normal;
        }
    
        .expandable-box-preview {
            font-style: italic;
            margin-bottom: $line-height-default;
        }
    }
}
