/* Accordion */
.accordion-parent {border-radius:4px;margin:4px 0;overflow:hidden;
    &:first-of-type {margin-top:2px;}
    &:last-of-type {margin-bottom:2px;}
    /* CORE STUFF */
    /* :: LAYOUT/POSITIONING FOR LABEL */
    & .accordion-label-wrapper {position:relative;overflow:hidden;
        * {cursor:pointer;user-select:none;}
        & .accordion-label {display:block;padding:8px 32px;}
        /* :: EXPAND/COLLAPSE BUTTON */
        & .accordion-button {background:transparent;left:4px;width:24px;height:24px;border:0px solid #666;border-radius:100%;position:absolute;display:flex;align-items:center;justify-content:center;top:50%;transform:translateY(-50%);padding:0;}
        & .accordion-button::after {border:2px solid #999;border-width:0 2px 2px 0;width:6px;height:6px;content:"";display:block;} /* Chevron button */
    }
    /* COLLAPSED */
    &[data-accordion-state="collapsed"] {
        /* :: LABEL */
        /* Collapse button arrow rotation/position */
        /*& .accordion-button::after {margin-top:-2px;transform:rotate(45deg);} /* Up/down arrow. Margin should be: -borderWidth */
        & .accordion-button::after {transform:rotate(-45deg);} /* Right/down arrow */
        /* :: CONTENT */
        & .accordion-content-wrapper {display:none;} /* Do not change */
    }
    /* EXPANDED */
    &[data-accordion-state="expanded"] {
        /* :: LABEL */
        /* Collapse button arrow rotation/position */
        /*& .accordion-button::after {margin-top:4px;transform:rotate(-135deg);} /* Up/down arrow. Margin should be: borderWidth*2 */
        & .accordion-button::after {transform:rotate(45deg);} /* Right/down arrow */
        /* :: CONTENT */
        & .accordion-content-wrapper {display:block;} /* Do not change */
    }
    &.accordion-moving .accordion-content-wrapper {display:block;overflow:hidden;} /* Do not change */
    /* CORE STUFF END */

    /* CUSTOMISATION BELOW HERE */
    /* COLLAPSED */
    &[data-accordion-state="collapsed"] {
        /* :: LABEL */
        background:#430d0e;border:1px solid #666;
        /* :: HOVER */
        & .accordion-label-wrapper:hover {background-image:linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05));
            & .accordion-button::after {border-color:#fcb825;} /* Border colour = arrow colour */
        }
    }
    /* EXPANDED */
    &[data-accordion-state="expanded"] {
        background:#430d0e;border:1px solid #666;
        /* :: LABEL */
        & .accordion-label-wrapper label {color:#fcb825;}
        /* :: HOVER */
        & .accordion-label-wrapper:hover {background-image:linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05));
            & .accordion-button::after {border-color:#fcb825;} /* Border colour = arrow colour */
        }
    }
    /* :: CONTENT */
    & .accordion-content {padding:4px;background:#777;}
    /* :: TRANSITIONS */
    & .accordion-button::after {transition:all 0.2s;}   /* Chevron button */
    & .accordion-content-wrapper {transition:all 0.3s;} /* Expand/collapse */

    /* ORDERING OVERRIDES (keep above sections tidy) */
    /*&:hover {border-color:#fcb825;} /* Accordion parent hover border */
}