/*==============================================================================
 Accrodions

 Accrodion, can be used with ul/ol/divs too

 Markup:
 <dl class="b-accordion">
     <dt class="b-accordion__title"> Title </dt>
     <dd class="b-accordion__contnet"> Content </dd>
 </dl>

 #{$namespace}accrodion
 ==============================================================================*/

#{$namespace}accordion {
    @include rem(margin-bottom, $verticalspace);
}



#{$namespace}accordion__title {
    padding: 1em;
    background-color: $theme-grey;
    display: block;
    text-decoration: none;
    color: inherit;
    font-weight: bold;

    > :last-child,
    > :last-child > :last-child {
        margin-bottom: 0;
    }

    .js &{
        cursor: pointer;
    }

    &.is-active,
    &:hover {
        background-color: $theme-grey--medium;
        color: inherit;
    }
}



#{$namespace}accordion__content {
    margin-bottom: 0;
    background-color: white;
    > div {
        padding: 1em;
    }

    > :last-child,
    > :last-child > :last-child {
        margin-bottom: 0;
    }

    .js &{
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: all .3s cubic-bezier(0, 1, 0.5, 1);
    }

    &.is-active{
        opacity: 1;
        max-height: 9999em; //Hack to fake 100% animation
    }
}