/* ####################################
   Content Expander

   - Critical Rendering Path: Optional
   ################################## */

.expanderSection {
    display: inline-block; /* Behave better around floated elements, i.e. drop below them with width=100% */
    width: 100%;
    margin-bottom: var(--site-box-margin-bottom);
    background: var(--site-spot-color-13);
    border-color: var(--site-color-1-lighter);
    border-width: var(--site-border-width);
    border-radius: var(--site-box-border-radius);
    border-style: solid;
}

    .expanderSection .expanderSection {
        background-color: #fff; /* They can be placed inside each other to create a tree-like effect. */
    }

    .expanderSection + .expanderSection {
        margin-top: calc(calc(var(--site-box-margin-bottom) * -1) + 2px); /* When there's one after another, this creates a nice accordion-like effect. */
    }

    .expanderLink {
        position: relative;
        margin: 0;
        padding: 0;
        font-size: var(--site-font-size-base);
        --expander-link-icon-size: 1.5em;
        --expander-link-icon-color: inherit;
        --expander-link-icon-weight: bold;
        --expander-link-icon-bg: var(--site-spot-color-13);
        --expander-link-icon-border-width: 2px;
        --expander-link-icon-border-color: inherit;
        --expander-link-icon-border-radius: 100%;
        --expander-link-hover-icon-color: inherit;
        --expander-link-hover-icon-bg: inherit;
        --expander-link-hover-icon-border-color: inherit;
    }

        .expanderLink a {
            font-size: var(--site-font-size-big);
            position: relative;
            display: inline-block;
            box-sizing: border-box;
            width: 100%;
            margin: 0;
            padding: var(--site-padding-thin);
            padding-right: calc(calc(var(--expander-link-icon-size) + calc(var(--expander-link-icon-border-width) * 2)) + calc(var(--site-padding-thin) * 2)); /* Enough room for the icon. Do you like this calculation? It comes from the width of .expanerLink a::after */
        }

            .expanderLink a.expanded {
            }

               .expanderLink a.expanded::after {
                   content: "-";
                   line-height: 15px;
               }

            .expanderLink a.collapsed::after {
                content: "+";
            }

            .expanderLink a::after {
                position: absolute;
                display: inline-block;
                text-indent: 0;
                top: var(--site-padding-thin);
                right: var(--site-padding-thin);
                color: var(--expander-link-icon-color);
                text-align: center;
                font-family: sans-serif;
                font-size: var(--expander-link-icon-size);
                font-weight: var(--expander-link-icon-weight);
                line-height: 22px;
                width: 24px;
                height: 24px;
                background: var(--expander-link-icon-bg);
                border-color: var(--expander-link-icon-border-color);
                border-width: var(--expander-link-icon-border-width);
                border-style: solid;
                border-radius: var(--expander-link-icon-border-radius);
            }

            .expanderLink a:hover {
                background: #faf8f6;
            }

                .expanderLink a:hover::after {
                    color: var(--expander-link-hover-icon-color);
                    background: var(--expander-link-hover-icon-bg);
                    border-color: var(--expander-link-hover-icon-border-color);
                }

    .expanderContent {
	    display: none; /* This will be switched on dynamically. */
        padding: 0 var(--site-padding-thin) var(--site-padding-thin);
    }

        .expanderContent > :first-child {
            margin-top: 0 !important;
        }

        .expanderContent > :last-child {
            margin-bottom: 0 !important;
        }