.accord-line-inside {
transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
opacity: 1;
transition-delay: 0s;
}
.accord-line-inside-active {
opacity: 0;
transition-delay: 0.7s;
height: 150% !important;
}
.accordionTrigger {
cursor: pointer;
}
.accordion-icon-inside {
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
.accordion-icon-inside span {
width: var(--IconsWidth);
height: var(--IconsHeight);
background-color: var(--IconsColorPassive);
position: absolute;
transition: background-color 300ms cubic-bezier(0.77, 0, 0.175, 1),
background-image 300ms cubic-bezier(0.77, 0, 0.175, 1),
transform 300ms cubic-bezier(0.77, 0, 0.175, 1);
}
.accordion-icon-inside span:nth-child(1) {
transform: rotate(90deg);
}
.accordion-icon-inside span:nth-child(2) {}
.accordion-icon-inside:after {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: var(--IconsBorderRadius);
border: var(--IconsBorderSize) solid var(--IconsBorderColorPassive);
background-image: var(--BGImgPassive);
background-size: cover;
background-color: var(--BGColorPassive);
padding: var(--IconsPadding);
position: absolute;
top: 50%;
z-index: -1;
transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1),
background-image 400ms cubic-bezier(0.77, 0, 0.175, 1),
border 400ms cubic-bezier(0.77, 0, 0.175, 1);
transform: translate(-50%, -50%);
left: 50%;
}
.accordion-icon-hover .accordion-icon-inside:after {
border: var(--IconsBorderSize) solid var(--IconsBorderColorHover);
background-image: var(--BGImgHover) !important;
background-color: var(--BGColorHover);
}
.accordion-icon-hover .accordion-icon-inside span {
background-color: var(--IconsColorHover);
}
.accordion-icon-active .accordion-icon-inside:after {
border: var(--IconsBorderSize) solid var(--IconsBorderColorActive);
background-image: var(--BGImgActive) !important;
background-color: var(--BGColorActive);
}
.accordion-icon-active span {
background-color: var(--IconsColorActive);
}
.accordion-icon-active span:nth-child(1) {
transform: rotate(0deg);
}