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

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

    @include InlineAnimation(0.12s ease-in-out) {
        0% {
            background-color: transparent;
            opacity: 0.5;
        }
        100% {
            background-color: $modalDialogBg;
        }
    }

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

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

    &.loadingDialog {
        * {
            color: #fff;
        }
    }

    > .dialogInner {
        background: #fff;
        @include S(min-width, 300px);
        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;
        }

        > .buttons {
            @include S(margin-top, 15px);
            display: flex;
            justify-content: flex-end;
            > button {
                @include S(margin-left, 8px);
                @include Text;
                @include S(min-width, 60px);
                @include S(padding, 5px, 15px);

                &.good {
                    background-color: $colorGreenBright;
                    color: #fff;
                }

                &.bad {
                    background-color: $colorRedBright;
                    color: #fff;
                }
            }
        }
    }
}