Accordion

// Accordion Panels
@mixin accordion__panel {
  padding: 0 $base-padding;
  background-color: $panel-primary;
  display: none;
  overflow: hidden;
  opacity: 0;
  border-bottom: $accordion-bottom-border solid $grey-lightest;

  p {
    color: $text-color-grey;
    padding-bottom: $base-padding;
  }
}

@mixin accordion__active_panel {
  opacity: 1;
  display: block;
}

// Accordion Buttons
@mixin accordion {
  @include font-style--med-bold-uppercase;
  background-color: $panel-primary;
  color: $header-text-color;
  padding: $type-margin $base-padding;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: $accordion-bottom-border solid $grey-lightest;
  outline: none;
  transition: $element-slow-fade-in;
  border-radius: 0px;
  vertical-align: middle;
  white-space: normal;

  &:hover,
  &:active,
  &:focus {
    color: $base-link-color;
    background-color: $panel-primary;
    border-bottom: $accordion-bottom-border solid $grey-lightest;
  }

  &:after {
    @include transition($element-spin-base-transition);
    content: '\f107';
    font-family: FontAwesome;
    float: right;
    font-size: $accordion-angle-size;
    font-weight: $font-weight-regular;
    color: $base-link-color;
    display: inline-block;
    text-align: center;
    line-height: $accordion-line-height;

    @media only screen and (max-width: $small-screen-max) {
      content: '';
      display: none;
    }
  }
}

@mixin active_accordion {
  color: $base-link-color;
  border-bottom: none;

  &:after {
    @include transform($element-spin-rotation-full);

    content: '\f106';
    font-family: FontAwesome;
  }
}

@mixin accordion-toggle--round {
  @include secondary-button;
  width: $accordion-toggle--round-size;
  height: $accordion-toggle--round-size;
  border: 0;
  border-radius: 50%;
  padding: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  box-shadow: $base-box-shadow;

  &:after {
    content: '\f107';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: FontAwesome;
    font-size: $accordion-angle-size;
    @include transition($element-spin-base-transition);
  }

  span {
    position: relative;
    right: 9999px;
  }

  &:hover,
  &:active,
  &:focus {
    outline: 0;
  }
}

@mixin accordion-toggle--round--active {
  @include transition($element-spin-base-transition);
  @include transform(translate(-50%, -50%) $element-spin-rotation-half);
}