/*
-------------------------------------------------------------------------------
23. Collapse [hm-23]
-------------------------------------------------------------------------------
*/

details,
details * {
    /* Fixes Chrome bug */
    box-sizing: border-box;
}

/* Collapse header */

.collapse-header {
    position: relative;
    cursor: pointer;
    padding: var(--collapse-header-padding);
    font-size: var(--collapse-header-font-size);
    color: var(--lm-collapse-header-text-color);
    background-color: var(--lm-collapse-header-bg-color);
    border: var(--collapse-header-border-width) solid var(--lm-collapse-header-border-color);
    border-radius: var(--collapse-header-border-radius);
    -moz-box-shadow: var(--lm-collapse-header-box-shadow);
    -webkit-box-shadow: var(--lm-collapse-header-box-shadow);
    box-shadow: var(--lm-collapse-header-box-shadow);
}
.dark-mode .collapse-header {
    color: var(--dm-collapse-header-text-color);
    background-color: var(--dm-collapse-header-bg-color);
    border-color: var(--dm-collapse-header-border-color);
    -moz-box-shadow: var(--dm-collapse-header-box-shadow);
    -webkit-box-shadow: var(--dm-collapse-header-box-shadow);
    box-shadow: var(--dm-collapse-header-box-shadow);
}
.collapse-header:focus {
    color: var(--lm-collapse-header-text-color-focus);
    background-color: var(--lm-collapse-header-bg-color-focus);
    border-color: var(--lm-collapse-header-border-color-focus);
    -moz-box-shadow: var(--lm-collapse-header-box-shadow-focus);
    -webkit-box-shadow: var(--lm-collapse-header-box-shadow-focus);
    box-shadow: var(--lm-collapse-header-box-shadow-focus);
    outline: var(--lm-collapse-header-outline-focus);
}
.dark-mode .collapse-header:focus {
    color: var(--dm-collapse-header-text-color-focus);
    background-color: var(--dm-collapse-header-bg-color-focus);
    border-color: var(--dm-collapse-header-border-color-focus);
    -moz-box-shadow: var(--dm-collapse-header-box-shadow-focus);
    -webkit-box-shadow: var(--dm-collapse-header-box-shadow-focus);
    box-shadow: var(--dm-collapse-header-box-shadow-focus);
    outline: var(--dm-collapse-header-outline-focus);
}
.collapse-panel[open] .collapse-header {
    color: var(--lm-open-collapse-header-text-color);
    background-color: var(--lm-open-collapse-header-bg-color);
    border-color: var(--lm-open-collapse-header-border-color);
    -moz-box-shadow: var(--lm-open-collapse-header-box-shadow);
    -webkit-box-shadow: var(--lm-open-collapse-header-box-shadow);
    box-shadow: var(--lm-open-collapse-header-box-shadow);
}
.dark-mode .collapse-panel[open] .collapse-header {
    color: var(--dm-open-collapse-header-text-color);
    background-color: var(--dm-open-collapse-header-bg-color);
    border-color: var(--dm-open-collapse-header-border-color);
    -moz-box-shadow: var(--dm-open-collapse-header-box-shadow);
    -webkit-box-shadow: var(--dm-open-collapse-header-box-shadow);
    box-shadow: var(--dm-open-collapse-header-box-shadow);
}
.collapse-panel[open] .collapse-header:focus {
    color: var(--lm-open-collapse-header-text-color-focus);
    background-color: var(--lm-open-collapse-header-bg-color-focus);
    border-color: var(--lm-open-collapse-header-border-color-focus);
    -moz-box-shadow: var(--lm-open-collapse-header-box-shadow-focus);
    -webkit-box-shadow: var(--lm-open-collapse-header-box-shadow-focus);
    box-shadow: var(--lm-open-collapse-header-box-shadow-focus);
    outline: var(--lm-open-collapse-header-outline-focus);
}
.dark-mode .collapse-panel[open] .collapse-header:focus {
    color: var(--dm-open-collapse-header-text-color-focus);
    background-color: var(--dm-open-collapse-header-bg-color-focus);
    border-color: var(--dm-open-collapse-header-border-color-focus);
    -moz-box-shadow: var(--dm-open-collapse-header-box-shadow-focus);
    -webkit-box-shadow: var(--dm-open-collapse-header-box-shadow-focus);
    box-shadow: var(--dm-open-collapse-header-box-shadow-focus);
    outline: var(--dm-open-collapse-header-outline-focus);
}
.collapse-panel[open] .collapse-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Collapse header arrow set using background image */

.collapse-header {
    /* Firefox */
    list-style-type: none;
}
.collapse-header::-webkit-details-marker {
    /* Chrome */
    display: none;
}
.collapse-header::marker {
    display: none;
}
.collapse-header:not(.without-arrow) {
    padding: var(--collapse-header-padding-with-bg-image);
    background-image: var(--collapse-header-bg-image);
    background-size: var(--collapse-header-bg-size);
    background-repeat: var(--collapse-header-bg-repeat);
    background-position: var(--collapse-header-bg-position);
}
.collapse-panel[open] .collapse-header:not(.without-arrow) {
    padding: var(--open-collapse-header-padding-with-bg-image);
    background-image: var(--open-collapse-header-bg-image);
    background-size: var(--open-collapse-header-bg-size);
    background-repeat: var(--open-collapse-header-bg-repeat);
    background-position: var(--open-collapse-header-bg-position);
}

/* Collapse header focus effect (::after) */

.collapse-header::after {
    content: "";
    position: absolute;
    display: var(--collapse-header-focus-effect-display);
    top: var(--collapse-header-focus-effect-top);
    left: var(--collapse-header-focus-effect-left);
    width: var(--collapse-header-focus-effect-width);
    height: var(--collapse-header-focus-effect-height);
    border-radius: var(--collapse-header-focus-effect-border-radius);
}
.collapse-header:focus::after {
    -moz-box-shadow: var(--lm-collapse-header-focus-effect-box-shadow);
    -webkit-box-shadow: var(--lm-collapse-header-focus-effect-box-shadow);
    box-shadow: var(--lm-collapse-header-focus-effect-box-shadow);
}
.dark-mode .collapse-header:focus::after {
    -moz-box-shadow: var(--dm-collapse-header-focus-effect-box-shadow);
    -webkit-box-shadow: var(--dm-collapse-header-focus-effect-box-shadow);
    box-shadow: var(--dm-collapse-header-focus-effect-box-shadow);
}

/* Controlling display based on collapse open state */

.collapse-panel[open] .hidden-collapse-open {
    display: none;
}
.collapse-panel:not([open]) .hidden-collapse-closed {
    display: none;
}

/* Collapse content */

.collapse-content {
    padding: var(--collapse-content-padding);
    font-size: var(--collapse-content-font-size);
    color: var(--lm-collapse-content-text-color);
    background-color: var(--lm-collapse-content-bg-color);
    border: var(--collapse-content-border-width) solid var(--lm-collapse-content-border-color);
    -moz-box-shadow: var(--lm-collapse-content-box-shadow);
    -webkit-box-shadow: var(--lm-collapse-content-box-shadow);
    box-shadow: var(--lm-collapse-content-box-shadow);
    border-top: none;
    border-bottom-left-radius: var(--collapse-content-border-radius);
    border-bottom-right-radius: var(--collapse-content-border-radius);
}
.dark-mode .collapse-content {
    color: var(--dm-collapse-content-text-color);
    background-color: var(--dm-collapse-content-bg-color);
    border-color: var(--dm-collapse-content-border-color);
    -moz-box-shadow: var(--dm-collapse-content-box-shadow);
    -webkit-box-shadow: var(--dm-collapse-content-box-shadow);
    box-shadow: var(--dm-collapse-content-box-shadow);
}

/* Collapse group */

.collapse-group .collapse-panel:not(:first-child) {
    margin-top: calc((-1) * var(--collapse-header-border-width));
}
.collapse-group .collapse-panel:not(:first-child) .collapse-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.collapse-group .collapse-panel:not([open]):not(:last-child) .collapse-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.collapse-group .collapse-panel[open]:not(:first-child) .collapse-content {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.collapse-group .collapse-panel[open]:not(:last-child) .collapse-content {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* 
    On IE, collapse panels are styled to be always open. This is because they 
    are not supporter by the browser.
    */

    /* Collapse header */
    
    .collapse-panel .collapse-header {
        cursor: auto;
        color: var(--lm-open-collapse-header-text-color);
        background-color: var(--lm-open-collapse-header-bg-color);
        border-color: var(--lm-open-collapse-header-border-color);
        -moz-box-shadow: var(--lm-open-collapse-header-box-shadow);
        -webkit-box-shadow: var(--lm-open-collapse-header-box-shadow);
        box-shadow: var(--lm-open-collapse-header-box-shadow);
    }
    .dark-mode .collapse-panel .collapse-header {
        color: var(--dm-open-collapse-header-text-color);
        background-color: var(--dm-open-collapse-header-bg-color);
        border-color: var(--dm-open-collapse-header-border-color);
        -moz-box-shadow: var(--dm-open-collapse-header-box-shadow);
        -webkit-box-shadow: var(--dm-open-collapse-header-box-shadow);
        box-shadow: var(--dm-open-collapse-header-box-shadow);
    }
    .collapse-panel .collapse-header {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Collapse header arrow set using background image */

    .collapse-panel .collapse-header:not(.without-arrow) {
        padding: var(--open-collapse-header-padding-with-bg-image);
        background-image: var(--open-collapse-header-bg-image);
        background-size: var(--open-collapse-header-bg-size);
        background-repeat: var(--open-collapse-header-bg-repeat);
        background-position: var(--open-collapse-header-bg-position);
    }

    /* Controlling display based on collapse open state */

    .collapse-panel .hidden-collapse-open {
        display: none;
    }
    .collapse-panel:not([open]) .hidden-collapse-closed {
        display: inline-block;
    }

    /* Collapse group */

    .collapse-group .collapse-panel:not(:first-child) .collapse-content {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .collapse-group .collapse-panel:not(:last-child) .collapse-content {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: 0;
    }
}