@import './globals.scss';

.Accordion
{
    .single-entry
    {
        display: inline-block;
        box-sizing: border-box;
        overflow: hidden;
        padding: 5px;
        width: 100%;
    }

    .single-data{
        width: 100%;
        display: inline-block;
        padding: 2.5px 5px;
    }

    .text.hasChildren:hover,
    .text.hasData:hover{
        cursor: pointer;
    }

    // Animation: height
    .toggling.animation-height .children,
    .toggling.animation-height .static-data
    {

        @keyframes toggleMenuEntriesHeight {
            0%{
                max-height: 0px;
            }
            100%{
                max-height: 250px;
                overflow: visible;
            }
        }

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

    .animation-height .children,
    .animation-height .static-data
    {
        max-height: 3000px;
    }

    .animation-height-back .children,
    .animation-height-back .static-data{
        @keyframes toggleMenuEntriesHeightBack {
            0%{
                max-height: 250px;
            }
            100%{
                max-height: 0px;
                overflow: hidden;
            }
        }
        max-height: 250px;
        overflow: hidden;
        animation: toggleMenuEntriesHeightBack $default-transition ease-in forwards;
    }

    // Animation: scale
    .toggling.animation-scale .children,
    .toggling.animation-scale .static-data{

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

    .animation-scale .children
    .animation-scale .static-data{
        transform: scaleY(1);
    }

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

    // Animation: opacity
    .toggling.animation-opacity .children,
    .toggling.animation-opacity .static-data{

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

    .animation-opacity .children,
    .animation-opacity .static-data{
        opacity: 1;
    }

    .animation-opacity-back .children,
    .animation-opacity-back .static-data{
        @keyframes toggleMenuEntriesOpacityBack {
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
        opacity: 1;
        animation: toggleMenuEntriesOpacityBack $default-transition ease-in forwards;
    }
}