/**
Accordion

This component can be used to display a group of content sections.
Use the accordion component.

Markup:
<div class="accordion">
    <div class="accordion__section accordion__section--open accordion__section--first">
        <div role="button" class="accordion__section-heading" id="toggle1" aria-controls="content1" aria-expanded="true" tabindex="0">
            <div class="accordion__section-heading-title">
                <span class="accordion__toggle">
                    <span class="accordion__toggle-icon svgicon svgicon--chevron-down-dark-grey"></span>
                </span>
                <h2 style="display: inline-block; font-weight: normal; margin: 0;">First Section</h2>
                <h3 class="accordion__section-sub-heading-title" style="display: inline-block; margin: 0;">
                    First Section subheading
                </h3>
            </div>
        </div>
        <div class="accordion__section-content" id="content1" aria-labelledby="toggle1" aria-hidden="false">
            First Section content
        </div>
    </div>
    <div class="accordion__section accordion__section--open">
        <div role="button" class="accordion__section-heading accordion__section-heading--disabled" id="toggle2 aria-controls="content2" aria-disabled="true" aria-expanded="true">
            <div class="accordion__section-heading-title">
                <span class="accordion__toggle accordion__toggle--disabled">
                    <span class="accordion__toggle-icon svgicon svgicon--icons-hamburger-green"></span>
                </span>
                <h2 style="display: inline-block; font-weight: normal; margin: 0;">Second Section</h2>
                <h3 class="accordion__section-sub-heading-title" style="display: inline-block; margin: 0;">
                    Second Section subheading
                </h3>
            </div>
        </div>
        <div class="accordion__section-content" id="content2" aria-labelledby="toggle2" aria-hidden="false">
            Second Section content
        </div>
    </div>
</div>

Name: accordion

Styleguide 2.31
*/

@accordion-color-disabled: @theme-grey4;
@accordion-color-border: @theme-grey10;
@accordion-color-heading-font: @theme-grey7;
@accordion-color-heading-start: #FBFBFB;
@accordion-color-heading-stop: @theme-grey1;

.accordion {
    display: block;
    width: 100%;
}

.accordion__section-heading {
    background: white;
    background: linear-gradient(-180deg, @accordion-color-heading-start 0%, @accordion-color-heading-stop 100%);
    border: 1px solid @color-border-main;
    border-top-width: 0;
    height: 36px;
    color: @accordion-color-heading-font;
    font-size: @font-size-base;

    &:hover {
        cursor: pointer;
    }
}

.accordion__section-heading--disabled {
    pointer-events: none;
    cursor: default;
}

.accordion__section-heading-title {
    padding: 8px 5px;
}

.accordion__section-sub-heading-title {
    font-weight: normal;
}

.accordion__section-content {
    display: none;
    padding: 15px;
    background: white;
    border: 1px solid @color-border-main;
    border-top: hidden;
}

.accordion__section--first {
    .accordion__section-heading {
        border-top-width: 1px;
    }
}

.accordion__section--open {
    .accordion__section-heading {
        border-bottom-width: 1px;
    }
    .accordion__section-content {
        display: block;
    }
}

.accordion__toggle {
    color: black;
    font-size: 15px;
    &:hover, &:active, &:focus {
        text-decoration: none !important;
    }
}

.accordion__toggle--disabled {
    color: @accordion-color-disabled;
}

.accordion__toggle-icon {
    height: 10px;
    width: 10px;
    vertical-align: middle;
}