/* 
-------------------------
Wrapper
------------------------- 
*/


.oll-component-accordion {}

.oll-accordion-wrapper {
    overflow: hidden;
}

.oll-accordion-wrapper:last-child {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
}

body[id] .oll-accordion-content-wrapper {
    height: auto;
}

/* 
-------------------------
Header
------------------------- 
*/

.oll-accordion-header-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    cursor: pointer;
    transition: 0.5s linear;
}

.oll-accordion-header-wrapper p {
    transition: color 0.15s ease-in-out;
}



/* 
-------------------------
Header title
------------------------- 
*/

.oll-accordion-header-wrapper .oll-accordion-title {
    width: 100%;
    transition: 0.15s linear;
}



/* 
-------------------------
Header Icon
------------------------- 
*/

.oll-accordion-header-wrapper .oll-accordion-icon {
    position: relative;
    height: 100%;
}


/* 
-------------------------
Header Plus
------------------------- 
*/

.oll-accordion-header-wrapper .oll-accordion-icon-di-plus {
    transition: transform 0.15s ease-in-out;
    position: relative;
    text-align: center;
}





/* Google icon */
.oll-accordion-header-wrapper .oll-accordion-icon-di-plus .material-symbols-outlined::before {
    content: '\e145';
    font-size: 0.9em;
    ;
}

/* Normal state */
.oll-accordion-header-wrapper .oll-accordion-icon-di-plus {
    transform: rotate(0deg) translateY(0px);
}

/* active-accordion state */
.oll-accordion-header-wrapper.active-accordion .oll-accordion-icon-di-plus {
    transform: rotate(45deg) translateY(0px) translateX(0px);
}

/* Hover state */
@media only screen and (min-width: 768px) {
    .oll-accordion-header-wrapper:hover .oll-accordion-icon-di-plus {
        transform: rotate(45deg) translateY(0px) translateX(0px);
    }

    .oll-accordion-header-wrapper.active-accordion:hover .oll-accordion-icon-di-plus {
        transform: rotate(45deg) translateY(0px) translateX(0px);
    }
}



/* 
-------------------------
Header Chevron
------------------------- 
*/



.oll-accordion-header-wrapper .oll-accordion-icon-di-chevron {
    transition: transform 0.15s ease-in-out;
    position: relative;
    text-align: center;
}

/* Google icon */
.oll-accordion-header-wrapper .oll-accordion-icon-di-chevron .material-symbols-outlined::before {
    content: '\e313';
    font-size: 1.2em;
}

/* Normal state */
.oll-accordion-header-wrapper .oll-accordion-icon-di-chevron {
    transform: rotate(0deg) translateY(1px);
}

/* active-accordion state */
.oll-accordion-header-wrapper.active-accordion .oll-accordion-icon-di-chevron {
    transform: rotate(180deg) translateY(-2px);
}

/* Hover state */
@media only screen and (min-width: 768px) {
    .oll-accordion-header-wrapper:hover .oll-accordion-icon-di-chevron {
        transform: rotate(0deg) translateY(4px);
    }

    .oll-accordion-header-wrapper.active-accordion:hover .oll-accordion-icon-di-chevron {
        transform: rotate(180deg) translateY(1px);
    }
}












/* 
-------------------------
Control panels
------------------------- 
*/

.oll-accordion-content-wrapper {
    overflow: hidden;
    height: 0;
    transition: height .35s ease;
}