/* ==========================================================================
   Accordion.
   ========================================================================== */
.accordion {
  list-style: none;
}

.accordion-item {
  margin-bottom: var(--space-l);

  .item-content {
    padding: var(--space-m) var(--space-l);
    overflow: hidden;

    table {
      margin: 0;
    }

    p,
    ul,
    ol {
      margin-bottom: var(--space-xs);
    }
  }

  /* States.
     ========================================================================== */
  &.is-open .accordion-trigger,
  .accordion-trigger:hover {
    color: var(--color-bg);
    background-color: var(--color-fg-primary);
  }
  &.is-open {
    .accordion-icon:before {
      transform: rotateX(180deg);
    }
  }
}

.accordion-trigger {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: var(--space-xs);
  width: 100%;
  color: var(--color-text-dark);
  cursor: pointer;
  transition: .2s;
  text-align: left;
  background: var(--color-bg-primary);
  border-radius: var(--border-radius-xl);
}
.accordion-icon.icon {
  --icon-size: 42px;
  background: var(--color-bg);
  border-radius: 50%;

  &:before {
    mask-size: 11px;
    background-color: var(--color-fg-primary);
  }
}

.accordion-title {
  position: relative;
  padding: 0 var(--space-m);
}