.accordion
  margin: 0
  margin-bottom: $margin
  padding: 0
  max-width: 100%
  border-radius: $borderRadius
  list-style: none

  &.is-clean
    margin-top: $margin

  &-item
    position: relative
    padding: $paddingPx
    border-radius: $borderRadius
    background-color: $white
    color: $black
    border: 2px solid black

    &:not(:last-child)
      margin-bottom: 10px

    &.is-active
      .accordion-title
        color: $blue

    .is-clean &
      margin-bottom: 0
      border: 0

  &-body
    overflow: hidden
    height: 0
    transition: 0.4s
    margin: 0

    .is-active > &
      height: auto
      margin-top: $margin

  &-list
    margin: 0 0 0 $margin
    padding: 0
    list-style: none

    li
      padding: $padding

    a
      color: $black
      text-decoration: none

      &:hover,
      &.is-active
        color: $blue

  &-title
    position: relative
    display: block
    font-size: $fontLarge
    width: 100%
    cursor: pointer
    color: $black
    text-decoration: none
    &:hover
      color: $blue

  &-icon
    position: absolute
    {$endDir}: 0
    top: 40%
    width: 8px
    height: 8px
    border-width: 0 0 2px 2px
    border-color: $black
    border-style: solid
    transform: rotate(-45deg)
    .is-active &
      transform: rotate(135deg)