.accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.accordion .accordion-item {
  position: relative;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-primary);
  padding: 10px 0;
  background-clip: padding-box;
}

.accordion .accordion-item:last-child {
  border: 0;
}

.accordion button {
  position: relative;
  display: block;
  background: none;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 44px;
  border: none;
  outline: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  width: 36px;
  height: 36px;
}

.accordion button .icon::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M23.128 12.0087C23.1281 11.845 23.096 11.6828 23.0334 11.5315C22.9709 11.3803 22.8791 11.2428 22.7633 11.127C22.6476 11.0113 22.5101 10.9195 22.3588 10.8569C22.2075 10.7944 22.0454 10.7622 21.8817 10.7624L13.2462 10.7536L13.2462 2.10918C13.2462 1.94552 13.2139 1.78346 13.1513 1.63225C13.0887 1.48105 12.9969 1.34366 12.8811 1.22793C12.7654 1.1122 12.628 1.0204 12.4768 0.957771C12.3256 0.895139 12.1635 0.862904 11.9999 0.862904C11.8362 0.862904 11.6742 0.895139 11.5229 0.957771C11.3717 1.0204 11.2344 1.1122 11.1186 1.22793C11.0029 1.34366 10.9111 1.48105 10.8485 1.63225C10.7858 1.78346 10.7536 1.94552 10.7536 2.10918L10.7536 10.7536L2.10922 10.7536C1.94556 10.7536 1.7835 10.7858 1.63229 10.8484C1.48109 10.9111 1.3437 11.0029 1.22797 11.1186C1.11225 11.2343 1.02045 11.3717 0.957814 11.5229C0.895183 11.6741 0.862948 11.8362 0.862948 11.9998C0.862949 12.1635 0.895184 12.3256 0.957815 12.4768C1.02045 12.628 1.11225 12.7654 1.22797 12.8811C1.3437 12.9968 1.48109 13.0886 1.63229 13.1512C1.7835 13.2139 1.94556 13.2461 2.10922 13.2461L10.7536 13.2461L10.7536 21.8905C10.7536 22.0541 10.7858 22.2162 10.8485 22.3674C10.9111 22.5186 11.0029 22.656 11.1186 22.7717C11.2344 22.8875 11.3717 22.9793 11.5229 23.0419C11.6742 23.1045 11.8362 23.1368 11.9999 23.1368C12.1635 23.1368 12.3256 23.1045 12.4768 23.0419C12.628 22.9793 12.7654 22.8875 12.8811 22.7717C12.9969 22.656 13.0887 22.5186 13.1513 22.3674C13.2139 22.2162 13.2462 22.0541 13.2462 21.8905L13.2462 13.2461L21.8905 13.2461C22.5623 13.2461 23.128 12.6804 23.128 12.0087Z' fill='white'/%3E%3C/svg%3E");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  transition: 0.3s;
}

.accordion button:hover {
  color: var(--color-primary);
}

.accordion button[aria-expanded=true] {
  color: var(--text-primary);
  transition: 0.3s;
}

.accordion button:hover .icon::before {
  rotate: 45deg;
  transition: 0.3s;
}

.accordion button[aria-expanded=true] .icon::before {
  background-color: var(--color-primary);
  border-radius: 50%;
  rotate: 135deg;
  transition: 0.3s;
}

.accordion-title {
  color: var(--white);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

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

.accordion .accordion-content p, .code p {
  color: var(--color-primary);
  background: var(--gradient-secondary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}