.ingameDialog {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: all;
    background: $modalDialogBg;

    display: flex;
    align-items: center;
    justify-content: center;

    &.visible {
        .dialogInner {
            opacity: 1;
        }
    }

    .dialogInner {
        transition: opacity 0.2s ease-in-out;
        opacity: 0;
    }

    > .dialogInner {
        background: #fff;
        @include S(min-width, 500px);
        max-width: calc(100vw - #{D(40px)});
        max-height: calc(100vh - #{D(40px)});
        @include S(border-radius, 4px);
        display: flex;
        flex-direction: column;
        @include S(padding, 12px);
        pointer-events: all;

        > .title {
            @include Heading;
            margin: 0;
            text-transform: uppercase;
            display: grid;
            align-items: center;
            grid-template-columns: 1fr auto;
            @include S(margin-bottom, 10px);

            > .closeButton {
                opacity: 0.7;
                @include S(width, 20px);
                @include S(height, 20px);
                background: uiResource("icons/close.png") center center / 80% no-repeat;
                cursor: pointer;
                pointer-events: all;
                transition: opacity 0.2s ease-in-out;
                &:hover {
                    opacity: 0.4;
                }
            }
        }

        > .content {
            overflow-y: auto;
            pointer-events: all;
        }
    }
}