// accordion.scss
.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion-header {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;

  &::after {
    content: '\25B6'; /* Right-pointing triangle */
    float: right;
    transition: transform 0.3s ease;
  }

  &.active::after {
    transform: rotate(90deg); /* Down-pointing triangle */
  }
}

.accordion-content {
  padding: 10px;
  border-top: 1px solid #eee;
  display: none;

  .accordion-item.active & {
    display: block;
  }
}