.accordion {
  display: flex;
  max-height: 37px;
  overflow: hidden;
  --padding: 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;

  border-radius: 4px;
  border: 1px solid var(--lines-color, #eaeaea);
  background: #fff;
  transition: var(--transition)
}

.accordion--open{
  max-height: 100%;
}

.accordion__header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: var(--padding);
  cursor: pointer;

  transition: var(--transition);
}

.accordion__header:hover{
  background-color: var(--button-bg-hover);
  border-radius: inherit;
}

.accordion__title{
  font-weight: 700;
}

.accordion__body{
  padding: var(--padding);
  transform: translateY(60px);
  opacity: 0;
  transition: var(--transition);
  transition-property: transform, opacity, height;
  transition-duration: .256s;
  overflow: hidden;
}

.accordion--open .accordion__body{
  transform: translateY(0);
  opacity: 1;
}