

.accordion-title.icon-position-left{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
}

.accordion-title.icon-position-right{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.accordion-item.card-accordion .accordion-title.icon-position-right{
  margin-left: var(--gapX5);
}

.accordion-title.icon-position-right{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.accordion-container{
  display: flex;
  flex-direction: column;
}

.accordion-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  box-sizing: border-box;
}

.accordion-title{
  cursor: pointer;
  user-select: none;
}

.active .accordion-content{
  overflow: visible;
  box-sizing: border-box;
  padding-bottom: var(--gapX8);
}

.accordion-title{
  padding-top: var(--gapX5);
  padding-bottom: var(--gapX5);
}

.accordion-title-icon {
    flex-shrink: 0; 
    
    transition: transform 0.3s ease-in-out;

    transform: rotate(0deg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.accordion-item.card-accordion .accordion-title.icon-position-left .accordion-title-icon {
    margin-right: var(--gapX5);
    padding: 5px;
    border-radius: 50%;
    font-size: 30px;
    background: var(--white);

}
.accordion-item.card-accordion .accordion-title.icon-position-right .accordion-title-icon {
    margin-right: var(--gapX5);
    padding: 5px;
    border-radius: 50%;
    font-size: 30px;
    background: var(--white);
}

.accordion-item.card-accordion .accordion-title-icon:hover{
  background: var(--primary500) !important;
  color: var(--white);
}

.accordion-item .accordion-title-icon:hover{
  color: var(--accentColor);
}


.accordion-item.active .accordion-title-icon {

    transform: rotate(180deg);
}

.accordion-item.card-accordion.active .accordion-title-icon{
  transform: rotate(45deg);
}

.accordion-item.card-accordion{
  border: 1px solid var(--cardBgColor);
  border-radius: var(--roundedS);
  background: var(--cardBgColor);
}