.pf-accordion {
  $padding: 1em;

  border: 1px solid transparent;
  padding: ($padding * 0.6) $padding;

  + * {
    border-top-width: 0;
  }

  > summary {
    position: relative;
    padding-right: 1em;
    cursor: pointer;

    &:focus {
      outline: none;
    }

    &:focus::after {
      font-weight: bold;
    }

    // FUN FACT; right now, styling of summary markers
    // will not work if
    // ::-webkit-details-marker
    // and
    // ::marker
    // are on the same rule
    &::-webkit-details-marker {
      display: none;
      content: "";
    }

    &::marker {
      display: none;
      content: "";
    }

    &::after {
      content: '⌃';
      position: absolute;
      text-align: center;
      top: 50%;
      transform: translateY(-50%) rotate(180deg);
      transform-origin: center;
      right: 0;
      display: inline-block;
      width: $padding;
    }
  }

  &[open] > summary::after {
    transform: translateY(-50%);
  }

  &--boxed {
    border-color: $colour-grey-lightmid;
  }

  &--card {
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 1.25em;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.13);
    padding: 0;

    > summary {
      font-size: 1.5em; // 16px * 15 = 24px
      border-bottom: 1px dashed #fff;
      padding: 0.666em; // 16px / 24px
      display: flex;
      align-items: center;
    }

    > summary .icon-svg-wrap {
      flex-basis: 1.5em;
    }

    > summary::after {
      width: 1em;
      height: 1em;
      line-height: 1.25em;
      right: 1em;
      background-color: $color-blue-check;
      color: #fff;
      border-radius: 50%;
      transition: transform 100ms;
    }

    &[open] > summary {
      border-bottom-color: $colour-grey-lightmid;
    }

    &[open] > summary::after {
      transform: rotate(0) translateY(-50%);
    }

    > summary:focus::after {
      font-weight: 300;
    }

    &__detail {
      padding: 1em;
    }
  }
}