.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
  text-align: left;
  background-color: #dfdfdf;
  border: 0;
  overflow-anchor: none;
}

.accordion-button:not(.collapsed) {
  color: white;
  background-color: #999;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>");
  transform: rotate(-180deg);
}

.accordion-button::after {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: auto;
  content: '';
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>");
  background-repeat: no-repeat;
  background-size: 20px;
  transition: transform 0.2s ease-in-out;
}

.accordion-button :hover {
  z-index: 2;
}