details {
    --transition-duration: 0.3s;
    --marker-icon: '\276F';
    --marker-scale: scale(1);
    --marker-translate: translate(0, 0);
    --marker-rounded-padding: 0.1em;
    --marker-rotation: rotate(0deg);
    --marker-icon-size: 1em;
    --marker-icon-color: inherit;
    --marker-font-weight: 400;
    --summary-gap: 0.15em;
}

summary {
    cursor: pointer;
}

/** 
* "Core style": expanding and collapsing 
* we need to wrap the detail's content twice
* 1. an outer wrap introducing a grid display context
* - specifying the transition speed from 0fr to 1fr
* 2. an inner content wrap with hidden overflow
**/

.details-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-duration);
}


.details-content-inner {
    overflow: hidden;
}


.details-content-expanded {
    grid-template-rows: 1fr;
}

/* fully expanded - show overflow */
.details-content-open>.details-content-inner {
    overflow: visible;
}


/* CSS normalization to avoid/mitigate layout shifts */
.details-wrap summary {
    padding-left: calc(1em + var(--summary-gap));
    list-style-type: none;
    display: flex;

    &:before {
        content: var(--marker-icon);
        display: inline-block;
        text-align: center;
        width: 1em;
        margin-right: var(--summary-gap);
        margin-left: calc(-1em - var(--summary-gap));
        transform-box: fill-box;
        transform-origin: 50%;
        transition: transform var(--transition-duration);
    }
}

.details-wrap details[open] {
    &>summary:before {
        transform: rotate(90deg);
    }
}


/**
  * hide default detail markers
  */
summary.summary {
    padding-left: 0;
    list-style-type: none;
    display: flex;
    align-items: flex-start;
    /* align-items: center;*/
    gap: var(--summary-gap);
    padding-left: 0;
    position: relative;

    /* hide default summary marker replacements */
    &:before {
        content: '';
        display: none;
    }
}

.summary .summary-marker+* {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
}

.summary::marker,
.summary::-webkit-details-marker {
    display: none;
}


/**
  * marker animation
  * for expanded and closed state
  */
.summary-marker {
    --marker-scale: scale(0.8);

    display: inline-flex;
    color: var(--marker-icon-color);
    transition: var(--transition-duration);
    font-size: var(--marker-icon-size);
    line-height: inherit;
    margin-bottom: 0;
    text-align: center;
    justify-content: center;
    width: 1em;
    transform: var(--marker-translate) var(--marker-scale) var(--marker-rotation);
    transform-origin: center;
    transform-box: fill-box;
    flex: 0 0 1em;
    font-weight: var(--marker-font-weight);
    box-sizing: border-box;

    & svg path {
        vector-effect: non-scaling-stroke;
    }
}


/*
.summary:has(.summary-marker-round) {
    --summary-gap: 0.3em;
}
*/


/** define marker icon/symbol: chevron by default **/
.summary-marker:before {
    content: var(--marker-icon);
    display: inline-block;
    line-height: 1.2;
}

/** expanded animation **/
.summary-marker-expanded {
    --marker-rotation: rotate(90deg);
}


/** Style: plus/minus style **/
.summary-marker-plus {
    --marker-font-weight: 700;
    --marker-scale: scale(1.2);
}

.summary-marker-plus.summary-marker-expanded {
    --marker-rotation: rotate(180deg);
}

.summary-marker-plus::before {
    content: '+';
}

.summary-marker-expanded.summary-marker-plus::before {
    /* minus sign */
    content: '\2212';
}

/** Style: custom icon: hide pseudo if svg icon is specified **/

.summary-marker-icon {
    --marker-translate: translate(0, calc(0.5lh - 0.5em));
    --marker-scale: scale(1);

}

.summary-marker-icon * {
    width: 100%;
    height: auto;
}


/*  hide pseudo elements when custom icons are defined */
.summary-marker-icon::before {
    display: none;
}

/** round marker style **/

.summary-marker-round {
    --marker-scale: scale(0.8);
    --marker-translate: translate(0, calc(0.5lh - 0.5em));

    background-color: currentcolor;
    border-radius: 50%;
    display: flex;
    align-items: center;
    width: 1em;
    height: 1em;
    padding: var(--marker-rounded-padding);

    /*
    &.summary-marker-plus{
    }
    */
}

.summary-marker.summary-marker-round.summary-marker-right {
    --marker-translate: translate(calc(var(--marker-rounded-padding) * -1), calc(0.5lh - 0.5em));
}


.summary-marker-icon-inner,
.summary-marker-round::before,
.summary-marker-round * {
    color: #fff
}


/** right alignment: 
  * flip marker via scale() 
  */
.summary-marker-right {
    --marker-scale: scale(-1, 1);
    order: 1;
    margin-left: auto;
}


.summary:focus,
.summary:focus-visible {
    outline: none;
    color: var(--color-focus)
}


.summary-marker-multi.summary-marker-collapsed path:nth-child(2) {
    display: none
}

.summary-marker-multi.summary-marker-expanded path:nth-child(1) {
    display: none
}



/* optical adjustment for plus/minus toggle */

.summary-marker-plusminus {
    transform: translate(0, 0.15em);
}


.summary-marker-plusminus.summary-marker-expanded {
    transform: translate(0, 0.15em) rotate(180deg);
}


.summary-marker-question {
    --marker-icon-size: 1em;
    --marker-icon-color: var(--color-border);

    margin-right: 0.3em;

    & svg {
        transform: translate(0.2em, 0) scale(1.3);
        //stroke-width: var(--icn-stroke-width, 2px);
        --icn-stroke-width: 1.5px;
    }
}

.summary-marker-question.summary-marker-expanded {
    --marker-rotation: rotate(0deg);
}