@import './globals.scss';

.ReadMore
{
    // Animation: height
    .toggling.animation-height{

        @keyframes toggleReadMoreHeight {
            0%{
                max-height: 0px;
            }
            100%{
                max-height: 1000vh;
                overflow: visible;
            }
        }

        max-height: 0px;
        overflow: hidden;
        animation: toggleReadMoreHeight $default-transition ease-in forwards;
    }

    .toggled.animation-height{
        max-height: 1000vh;
    }

    .animation-height-back{
        @keyframes toggleReadMoreHeightBack {
            0%{
                max-height: 500px;
            }
            100%{
                max-height: 0px;
            }
        }
        animation: toggleReadMoreHeightBack $default-transition ease-in forwards;
    }

    // Animation: scale
    .toggling.animation-scale{

        @keyframes toggleReadMoreScale {
            0%{
                transform: scaleY(0);
            }
            100%{
                transform: scaleY(1);
            }
        }
        transform-origin: top;
        transform: scaleY(0);
        animation: toggleReadMoreScale $default-transition ease-in forwards;
    }

    .toggled.animation-scale{
        transform: scaleY(1);
    }

    .animation-scale-back{
        @keyframes toggleReadMoreScaleBack {
            0%{
                transform: scaleY(1);
            }
            100%{
                transform: scaleY(0);
            }
        }
        transform-origin: top;
        transform: scaleY(1);
        animation: toggleReadMoreScaleBack $default-transition ease-in forwards;
    }

    // Animation: opacity
    .toggling.animation-opacity{

        @keyframes toggleReadMoreOpacity {
            0%{
                opacity: 0;
            }
            100%{
                opacity: 1;
            }
        }
        opacity: 0;
        animation: toggleReadMoreOpacity $default-transition ease-in forwards;
    }

    .toggled.animation-opacity{
        opacity: 1;
    }

    .animation-opacity-back {
        @keyframes toggleReadMoreOpacityBack {
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
        opacity: 1;
        animation: toggleReadMoreOpacityBack $default-transition ease-in forwards;
    }
}