/* ACCORDION */
.componentAccordion {
    --max-h: 1000;
    --transition-time: .25s;
    --contentTopPadding: 22;
    --contentBottomPadding: 17;
}
  
.componentAccordion:has(.accordion-content.hidden) {
    --max-h: 0 !important;
}

.accordion-title {
    position: relative;
    cursor: pointer;
    margin-bottom:3.5rem;
}

.accordion-title:after {
    content: '';
    position: absolute;
    top: .313rem;
    background-image: var(--dropdown-arrow-background);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 1.125rem 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    margin-left: 1rem;
    transform: rotateX(0deg);
    transition: transform var(--transition-time);
}

.accordion-title.bgcol-white:after {
    background-image: var(--dropdown-arrow-background-blue);
}

.accordion-title.rotate-arrow-180:after {
    transform: rotateX(180deg);
}

.accordion-content {
    max-height: calc(var(--max-h) * 1px);
    overflow: hidden;
    overflow: clip;
    transition: max-height var(--transition-time),padding-top var(--transition-time),padding-bottom var(--transition-time);
}

.accordion-content-inner {
    padding-top: calc(var(--contentTopPadding) * 1px);
    padding-bottom: calc(var(--contentBottomPadding) * 1px);
}

.accordion-content:not(.hidden) {
    max-height: calc((var(--max-h) + var(--contentBottomPadding)) * 1px);
}

/* SHOW / HIDE CONDITIONNALLY INSIDE TITLE */
.componentAccordion:has(.accordion-content:not(.hidden)) .show-when-hidden,
.componentAccordion:has(.accordion-content.hidden) .show-when-visible {
    display: none;
}

.componentAccordion:has(.accordion-content.hidden) .show-when-hidden,
.componentAccordion:has(.accordion-content) .show-when-visible {
    display: block;
}

.componentAccordion:has(.accordion-content.hidden) span.show-when-hidden,
.componentAccordion:has(.accordion-content:not(.hidden)) span.show-when-visible {
    display: inline;
}

.accordion-content ul {
    padding-left: 0;
}

/* BREAKPOINT CONDITIONAL ACCORDION */

/* DESKTOP */
@media screen and (min-width: 64rem) {
    .mobile-tablet-only-accordion .accordion-content {
        max-height: initial;
        padding-bottom: 0;
    }
    
    .mobile-tablet-only-accordion .accordion-title {
        cursor: default;
    }
    
    .mobile-tablet-only-accordion .accordion-title:after {
        content: none;
    }
}