/// <reference path="../../../Content/shared/_variables-shared.scss" />
/// <reference path="../../../Content/shared/_mixins.scss" />
/// <reference path="_variables.scss" />
/// <reference path="../../../Content/bs4/scss/bootstrap.scss" />

.more-less {
    display: block;
    position: relative;
    max-height: 260px;
    overflow: hidden;
    margin-bottom: 1.5rem;

    .btn-text-expander {
        display: none;
		align-items: center;
        position: absolute;
        font-weight: $font-weight-medium;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        text-decoration: none !important;
    }

    .btn-text-expander--expand::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 0;
        height: ($font-size-base * $line-height-base) * 3;
        background: linear-gradient(to bottom, rgba($body-bg, 0), $body-bg 70%, $body-bg 100%);
    }

    .btn-text-expander--collapse {
        position: relative;
        font-weight: normal;
    }

    &.collapsed {
        .btn-text-expander--expand { display: flex; }
    }

    &.expanded {
        max-height: none !important;
        .btn-text-expander--collapse { display: flex; }
    }
}