.accordion-title{
  @extend .heading;
  text-decoration: none;

  &:hover,
  &:active,
  &:visited,
  &:focus{
    color: $white;
  }

  .accordion-icon{
    width: 16px;
    height: 16px;
    display: block;
    float: right;
    color: $white;
  }
}

.accordion-secondary{
  &--header{
    font-size: $base-font-size;
  }

  &--heading{

  }
}
.accordion.secondary{
  background: none;

  a{
    font-size: $global-font-size;
  }

  .accordion-content a{
    font-size: $global-font-size;
  }

  .accordion-title{
    background: $white;
    color: $slate;

    &:hover{
      background: $stone;
    }
  }

  .top-level,
  .top-level:hover{
    background: darken($stone, 5%);
    color: $slate;
  }
}

.accordion{
  &__header{
    background: $brand-blue-light;
    overflow: auto;
    display: block;
  }

  &__heading{
    @extend .heading;
    @include small-10;
  }

  &__toggle{
    @include small-2;
    @extend .fa;
    @extend .fa-arrows-v;
    text-align: right;
    color: $white;
    padding-top: $base-padding*1.25;
  }
}

.accordion-multi-state{
  @extend .accordion;
  margin-bottom: $base-margin;
  background: transparent;
  -ms-overflow-style: none;

  .accordion-item{ //this is a foundation class needed for accordions to work. We only want to modify the margin for multi-state which is why it is nested.
    margin-bottom: $base-margin;
  }

  &__header{
    @extend .accordion__header;
    background: transparent;
    position: relative;
  }

  &__heading-bg{
    @include small-10;
    color: $white;
    padding: 0.63rem $base-padding;
    width: calc(100% - 20px);

    &--active{
      @extend .accordion-multi-state__heading-bg;
      background: $brand-blue-light;
    }

    &--inactive{
      @extend .accordion-multi-state__heading-bg;
      background: $stone;

      .accordion-multi-state__heading{
        color: $slate;
      }
    }

    &--complete{
      @extend .accordion-multi-state__heading-bg;
      background: $brand-green;
    }

    &--error{
      @extend .accordion-multi-state__heading-bg;
      background: $brand-red;
    }
  }

  &__heading{
    color: $white;
    margin-left: $base-margin*0.75;
    font-size: $base-font-size;
    padding: 0;
  }

  &__icon{
    @extend .fa;
    width: 39px;
    height: 39px;
    border: 2px solid $brand-blue-light;
    display: inline-block;
    border-radius: 100%;
    position: absolute;
    background: white;
    @include vertical-center;

    &::before{
      @include vertical-center;
      width: 100%;
      text-align: center;
      font-size: 22px;
    }

    &--active{
      @extend .accordion-multi-state__icon;
      @extend .fa-check;
      color: $stone;
    }

    &--inactive{
      @extend .accordion-multi-state__icon;
      border: 2px solid $stone;
    }

    &--complete{
      @extend .accordion-multi-state__icon;
      @extend .fa-check;
      border: 2px solid $brand-green;
      background: $white;
      color: $brand-green;
    }

    &--error{
      @extend .accordion-multi-state__icon;
      @extend .fa-close;
      border: 2px solid $brand-red;
      background: $white;
      color: $brand-red;
    }
  }
}

// Foundation sets a border-radius by default,
// and there doesn't seem to be an override in the settings file
.accordion-item:first-child > :first-child,
.accordion-item:first-child > :last-child,
:last-child:not(.is-active) > .accordion-title{
  border-radius: 0;
}