// 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;
    }
}

$web-boxes: true !default;
@if $web-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);
    }

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

        h3:first-child,
        h4:first-child,
        h5:first-child,
        h6:first-child {
            font-style: normal;
        }
    
        .toggle {
            color: inherit;
            cursor: pointer;
            float: right;
        
            &:after {
            content: " –";
            }
            
            &.closed:after {
            content: " +";
            }
            
            &.open:after {
            content: " \2013";
            }
        }
    
        .expandable-box-preview {
            & p:last-of-type,
            & ol:last-of-type,
            & ul:last-of-type {
                margin-bottom: $line-height-default;
            }
    
            .preview-read-more {
                display: block;
                margin: $line-height-default auto 0;
            }
        }
    }

    .feature-box {
        @include box();

        // border-style: dashed;
        border-color: $color-accent;
        margin: 0;
        max-width: calc(#{$max-width-default} * 0.5 - 2rem);
        padding: 0;

        .feature-box-image-wrapper {
            background-color: $white;
            border: $rule-thickness solid $color-accent;
            border-radius: 5rem;
            height: 5rem;
            width: 5rem;
            margin: -1rem auto 0 auto;
            padding: 0.75rem;
            text-align: center;

            a {
                text-decoration: none;
            }

            img, svg {
                border-radius: 5rem;
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }

        .feature-box-text {
            margin: 1rem;
        }
    }

    .feature-boxes {
        display: flex;
        gap: 2rem 2rem;
        flex-wrap: wrap;
        justify-content: center;
        margin: 4rem 0;

        font-family: $font-text-secondary;

        @media only screen and (min-width: $max-width-default) {
            width: 100vw;
            margin-left: calc(-1 * ((100vw - #{$max-width-default}) * 0.5 + 1rem))
        }
    }

    .color-panel {

        // By default, the accent color,
        // and then overriden by the class name,
        // in the format `background-<hexvalue>`,
        // which is read and applied by JS.
        background-color: $color-accent;

        clear: both;
        margin-bottom: $content-padding-bottom * 2;
        padding: ($content-padding-top * 2) $content-padding-right ($content-padding-bottom * 2) $content-padding-left;
        
        // If screen is less than max-width-default,
        // only extend the color as far as the padding on the content.
        // Otherwise, extend it by that plus the sidebar space.
        margin-left: -($content-padding-left);
        margin-right: -($content-padding-right);
        width: calc(100vw - ((#{$content-padding-left} + #{$content-padding-right}) * 0.5));

        @media only screen and (min-width: $max-width-default) {
            width: 100vw;
            margin-left: calc(-1 * ((100vw - #{$max-width-default}) * 0.5) - #{$content-padding-left});
            margin-right: calc(-1 * ((100vw - #{$max-width-default}) * 0.5) - #{$content-padding-right});
            padding-left: calc(((100vw - #{$max-width-default}) * 0.5) + #{$content-padding-left});
            padding-right: calc(((100vw - #{$max-width-default}) * 0.5) + #{$content-padding-right});
            padding-top: $content-padding-top * 4;
            padding-bottom: $content-padding-bottom * 4;
        }

        // No space above first heading in panel
        & > h2:first-of-type,
        & > h3:first-of-type,
        & > h4:first-of-type {
            margin-top: 0;
        }

        // No margin below last child
        & > :last-child {
            margin-bottom: 0;
        }
    }
}
