.expandable
{
    position: relative;

    background: $color-background-darker;

    margin-bottom: steps(2.5);

    &:last-child
    {
        margin-bottom: 0;
    }

    @include for-at-least-normal-tablets
    {
        margin-bottom: steps(2);
    }

    .expandable-switch
    {
        position: relative;

        display: block;
        padding: steps(1) steps(2) steps(0.5);

        color: $color-text-darker;
        text-decoration: none;

        &:before
        {
            @include transition(transform);

            content: svg-image-data-url("chevron-right", $fill: $color-brand-darker);
            display: block;
            width: steps(2);
            height: steps(2);
            position: absolute;
            top: 0;
            left: steps(-4);
            padding: steps(1.5) steps(1);
            color: $color-text-normal;

            @include for-at-least-normal-tablets
            {
                left: steps(-5);
                padding: steps(2.5) steps(1.5);
            }

            html:not(.js) &
            {
                display: none;
            }
        }

        @include for-at-least-normal-tablets
        {
            padding: steps(1) steps(3) steps(2);

            .title
            {
                margin-right: steps(1);
            }
        }

        .title,
        .subtitle
        {
            display: block;

            @include for-at-least-normal-tablets
            {
                display: inline-block;
            }
        }

        .title
        {
            @include normal-text;

            font-weight: bold;
            margin-bottom: 0;
        }

        .subtitle
        {
            @include small-text;

            padding-bottom: steps(1);
            margin-top: steps(-0.5);

            font-weight: normal;
            color: $color-text-normal;

            @include for-at-least-normal-tablets
            {
                margin-top: 0;
                padding-bottom: 3px;
            }
        }
    }

    .expandable-switch,
    .expandable-content
    {
        background: $color-background-lighter;
        margin-left: steps(4);

        @include for-at-least-normal-tablets
        {
            margin-left: steps(5);
        }
    }

    .expandable-content
    {
        display: none;

        html:not(.js) &
        {
            display: block;
        }
    }

    &.expanded
    {
        .expandable-switch
        {
            color: $color-brand-normal;

            &:before
            {
                transform: rotate(90deg);

                left: steps(-4.5);
                top: steps(0.5);
                padding: steps(1) steps(1.5);

                @include for-at-least-normal-tablets
                {
                    left: steps(-6);
                    top: steps(1);
                    padding: steps(1.5) steps(2.5);
                }
            }
        }

        .expandable-content
        {
            display: block;
        }
    }
}
