/* ACCESSIBLE ALTERNATIVE: <details> element */
.accessible-expand-box {
    background-color: var(--region-background-color);
    border-radius: var(--toggle-expand-label-border-radius);
    margin-bottom: 0.3em;

    transition: max-height 0.1s ease;

    font-size: var(--basic-font-size);

    .accessible-expand-box-content {
        padding: var(--toggle-expand-label-padding);
    }
    summary {
        cursor: pointer;
        /* hide normal icon */
        list-style: none;
        display: inline-block;
        color: var(--page-internal-link-color);
        font-size: var(--basic-font-size);
        line-height: 2em;
    }
    summary::before {
        font-weight: bold;
        padding-left: 0.5em;
    }
    summary span {
        padding-left: calc(var(--toggle-expand-label-padding) - 0.2em);
    }
}

.accessible-expand-box[open] {
    max-height: 50em;
    overflow-y: auto;
    transition: max-height 0.3s ease-in;

    summary::before {
        content: '⬡';
        /* Necessary for rotation to work properly */
        /* display: inline-block; */
        /* transform: rotate(360deg); */
        /* transition: 400ms; */
    }

    summary > span::after {
        display: inline-block;
        vertical-align: middle;
        content: 'collapse'
    }
}

.accessible-expand-box:not([open]) {
    max-height: calc(var(--toggle-expand-label-padding) + 2em);
    transition: max-height 0.1s;

    summary::before {
        content: '⬢';
        /* Necessary for rotation to work properly */
        /* display: inline-block; */
        /* transition: 400ms; */
    }

    summary > span::after {
        display: inline-block;
        vertical-align: middle;
        content: 'show more ...'
    }
}


.accessible-expand-box .accessible-expand-box-content > ul {
    margin-block-start: 0px;
}