.pf-accordion-menu {
  $color-blank: #fff;
  $color-check-open: $color-blue-check;
  $color-check-closed: $color-blue-check-hover;
  $transition-speed-quick: 200ms;

  list-style-type: none;
  padding-left: 0;
  background: $color-blank;
  
  &--active {
    background-color: $color-check-open;
  }

  &--no-top {
    margin-top: 0;
  }

  li { // global list items
    display: flex;
    flex-wrap: wrap;
    border-top: 1px dashed rgb(216, 216, 216);
    align-items: center;

    > * {
      flex-wrap: nowrap;
    }

    > input {
      display: none;
    }

    > label:first-of-type,
    > a:first-of-type {
      flex-grow: 1;
      display: flex;
      align-items: center;
      min-height: 3em;
      color: #4a4a4a;

      &.pf-accordion-menu--active {
        color: $color-blank;

        &:hover {
          color: $color-blank;
        }
      }

      &:hover {
        text-decoration: none;
        color: rgb(0, 177, 235);
      }

      &:focus {
        background-color: #eee;
      }
    }

    > .pf-accordion-menu__fakecheck,
    > a + .pf-accordion-menu__fakecheck {
      flex-grow: unset;
      display: flex;
      flex-basis: 3em;
      position: relative;
      justify-content: center;

      &::before {
        content: '';
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    > * > svg {
      top: auto;
      flex-basis: 3em;
      width: 1.5em;
      height: 1.5em;
    }
  }

  > li:first-of-type {
    border-top-width: 0;
  }

  label:hover ~ label,
  label:focus ~ label {
    &::before {
      background-color: $color-check-open;
    }

    svg {
      stroke: $color-check-open;
    }
  }

  input {
    ~ .pf-accordion-menu__fakecheck {
      cursor: pointer;

      &::before {
        background-color: $color-check-closed;
        border-radius: 50%;
        transition: background-color $transition-speed-quick;
      }

      &:hover,
      &:focus {
        &::before {
          background-color: $color-check-open;
        }

        svg {
          stroke: $color-check-open;
        }
      }

      svg {
        width: 0.65em;
        height: 0.65em;
        fill: $color-blank;
        stroke-width: 1px;
        transition: stroke $transition-speed-quick, transform $transition-speed-quick;
        stroke: $color-check-closed;
        transform: translateY(1px);
      }
    }

    ~ ul { // nested list
      max-height: 0;
      transition: all 300ms ease-in;
      overflow: scroll;
      flex-basis: 100%;
      list-style-type: none;
      overflow: hidden;
      padding-left: 0;

      li > *::before {
        display: flex;
        content: '';
        flex-basis: 3em;
      }
    }
  }

  input:checked {
    ~ .pf-accordion-menu__fakecheck svg {
      transform: rotate(180.1deg);
      transform-origin: center 0.3em;
    }
    ~ ul { // open styles
      max-height: 500em;
    }
  }

  &__item {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  
    > * {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}