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

.accordion-item {
  border-bottom: 2px solid var(--color-fg-primary);

  .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-fg-primary);
  }

  .accordion-trigger:hover {
    .accordion-title:after {
      transform: scaleX(1);
      transform-origin: 0 50%;
    }
  }

  &.is-open {
    .accordion-icon:before {
      transform: rotateX(180deg);
    }
  }
}

.accordion-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: var(--space-l);
  width: 100%;
  color: var(--color-fg-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  cursor: pointer;
  transition: .2s;
  text-align: left;
  background: var(--color-bg-primary);
}
.accordion-icon.icon {
  --icon-size: 18px;

  &:before {
    background-color: var(--color-fg-primary);
  }
}

.accordion-title {
  position: relative;

  &:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--color-fg-primary);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform .3s ease-out;
  }
}