@import "../../../css/static/properties";
@import "../../../css/static/mixin";

.overlay {
    position: absolute;
    z-index: 1000;

    pointer-events: all;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    opacity: 1;
    background-color: #000000EF;

    display: flex;
    flex-direction: column;
    justify-content: center;

    &.hidden {
        pointer-events: none;
        opacity: 0;
    }

    @include transition(ease-in-out .25s);
}

.containerMenuBar {
    position: absolute;

    top: .25em;
    left: 0;
    right: .25em;

    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    .entry {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 2em;

        margin: .25em;
        padding: .15em;

        border-radius: .125em;

        cursor: pointer;

        .containerIcon {
            width: 1em;
            height: 1em;
            display: flex;

            img {
                height: 100%;
                width: 100%;
            }
        }

        &:hover {
            background-color: #FFFFFF1F;
        }
    }
}

.containerImage {
    max-width: 90%;
    max-height: 90%;

    align-self: center;
    text-align: center;

    display: block;

    img {
        flex-shrink: 1;

        min-height: 1em;
        min-width: 1em;

        max-height: 100%;
        max-width: 100%;
    }
}