.famesmile-accordion-container {
  --star-height: max(20px, 2vw);
  --star-width: max(20px, 2vw);
  --arrow-width: max(16px, 1.1vw);
  --arrow-height: max(23px, 1.6vw);
  --padding-bottom: max(12px, 0.8vw);
  --arrow-bottom-space: max(30px, 2vw); /* Extra space for arrow */
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: var(--padding-bottom);
  padding-top: 0;
  border-bottom: 1px solid #000000;
  transition: all 0.5s ease;

  .content-wrapper {
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
  }

  .title {
    text-transform: uppercase;
    font-size: max(14px, 1.4vw);
    font-weight: 400;
    line-height: 1.2;
    padding-right: var(--arrow-width);
    &.is-bold {
      font-weight: 700;
    }
  }
  .title,
  .arrow {
    cursor: pointer;
  }

  .arrow {
    position: absolute;
    right: 0;
    top: 0;
    min-width: var(--arrow-width);
    min-height: var(--arrow-height);
    width: var(--arrow-width);
    height: var(--arrow-height);
    transition: transform 0.5s ease;
    transform-origin: center;
    svg {
      width: 100%;
      height: auto;
    }
  }
  .star {
    height: var(--star-height);
    width: var(--star-width);
    position: absolute;
    top: calc(var(--star-height) / -2);
    left: calc(var(--star-height) / -2);
    transform: translate(-100%, 0%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    svg {
      width: 100%;
      height: auto;
    }
  }

  &.active {
    padding-top: calc(var(--star-height) / 2);

    .star {
      opacity: 1;
      transform: translate(0%, 0%) rotate(180deg);
    }
    .arrow {
      transform: translateY(
          calc(var(--total-height, 0px) - var(--padding-bottom))
        )
        rotate(180deg);
    }
  }
}