.accordion {
  $base-border-color: gainsboro !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $dark-gray: #333 !default;
  $base-font-color: $dark-gray !default;
  $accordion-menu-border-color: $base-border-color;
  $accordion-menu-color: $base-font-color;
  $accordion-menu-border: 1px solid $accordion-menu-border-color;
  $accordion-menu-background: lighten($accordion-menu-border-color, 10%);
  $accordion-menu-hover: lighten($accordion-menu-background, 2%);
  $accordion-menu-sub-background: darken($accordion-menu-background, 5%);
  $accordion-menu-sub-inset: darken($accordion-menu-sub-background, 6%);
  $accordion-menu-sub-hover: lighten($accordion-menu-sub-background, 2%);
  $accordion-menu-list-padding: ($base-spacing / 2) $gutter;

  background-color: $accordion-menu-background;
  border: $accordion-menu-border;
  margin: 0 0 $base-spacing 0;
  padding: 0;

  ul {
    margin: 0;
    padding: 0;
  }

  li {
    border-bottom: $accordion-menu-border;
    list-style: none;

    > a {
      color: $accordion-menu-color;
      display: block;
      padding: $accordion-menu-list-padding;
      text-decoration: none;
    }

    &:last-child {
      border: 0;
    }

    &:focus,
    &:hover {
      background-color: $accordion-menu-hover;
    }
  }

  ul.submenu {
    display: none;

    li {
      background-color: $accordion-menu-sub-background;

      &:first-child {
        border-top: $accordion-menu-border;
        box-shadow: inset 0 1px 1px $accordion-menu-sub-inset;
      }

      &:focus,
      &:hover {
        background-color: $accordion-menu-sub-hover;
      }
    }
  }

  .is-expanded {
    display: block;
    padding-bottom: 0;
  }
}