.ui-accordion {
  &__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    &--active {
      .ui-accordion__toggle {
        &::after {
          transform: translateY(-50%) rotate(180deg);
        }
      }
    }
  }
  &__toggle {
    flex-shrink: 0;
    position: relative;
    margin-left: 22px;
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none'%3E%3Cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m15 1.5-7 7-7-7'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: contain;
      transition: 0.3s;
    }
  }
  &__body {
    display: none;
    padding-top: 24px;
  }
  &--white {
    color: #fff;
  }
}
