/*------------------------------------*\
    #EXPANDABLE
\*------------------------------------*/

$expandable-element-gradient-color: $white !default;
$expandable-button-color: $link-color !default;

.expandable {}

.expandable--expanded {}

    .expandable__element {
        position: relative;
        overflow: hidden;

        &::after {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            content: '';
            background: linear-gradient(
                to bottom,
                rgba($expandable-element-gradient-color, 0) 50%,
                rgba($expandable-element-gradient-color, 1) 100%
            );
        }

        .expandable--expanded &::after {
            display: none;
        }
    }

    .expandable__button {
        @extend %button-reset;
        color: $expandable-button-color;
        cursor: pointer;

        &::before, &::after {
            content: '↓';
        }

        .expandable--expanded & {
            display: none;
        }
    }