/*
  ACCORDION
  ---------

  The trusy accordion allows you to create a series of vertical tabs.
*/

/// @Foundation.settings
// Accordion
$accordion-border: 1px solid $gray-dark !default;

$accordion-title-background: $gray-light !default;
$accordion-title-background-hover: smartscale(
    $accordion-title-background,
    5%
) !default;
$accordion-title-background-active: smartscale(
    $accordion-title-background,
    3%
) !default;
$accordion-title-color: isitlight($accordion-title-background) !default;
$accordion-title-color-active: isitlight($accordion-title-background) !default;

$accordion-title-padding: $global-padding !default;
$accordion-content-padding: $global-padding !default;
///

@mixin accordion-title(
    $background: $accordion-title-background,
    $background-hover: $accordion-title-background-hover,
    $background-active: $accordion-title-background-active,
    $color: $accordion-title-color,
    $color-active: $accordion-title-color-active,
    $padding: $accordion-title-padding
) {
    padding: $padding;
    background: $background;
    color: $color;
    line-height: 1;
    cursor: pointer;
    &:hover {
        background: $background-hover;
    }
    .is-active > & {
        background: $background-active;
        color: $color-active;
    }
}
@mixin accordion-content($padding: $accordion-content-padding) {
    padding: $padding;
    display: none;
    .is-active > & {
        display: block;
    }
}
@include exports(accordion) {
    .accordion {
        @if hasvalue($accordion-border) {
            border: $accordion-border;
        }
    }
    .accordion-item {
    }
    .accordion-title {
        @include accordion-title;
    }
    .accordion-content {
        @include accordion-content;
    }
}
