.dialogues {
    opacity: 0;
}

.dialogues:not(:empty) {
    background: fade(#000, 50%);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483648; // fuck it
    opacity: 1;
    transition: opacity .2s;
}

.dialogue {
    font-family: @cute-font;
    display: inline-block;
    background: #c2affe;
    box-shadow: 0 0 5px #9475B2;
    border: 1px solid #9475B2;
    padding: 4px;
    min-width: 250px;
    border-radius: 2px;

    &__buttons {
        text-align: right;
        border-top: 1px solid #9475b2;
        margin-top: 2px;
        padding-top: 2px;
    }

    &__button {
        font-family: @cute-font;
        background: #b19eed;
        border: 1px solid #9475B2;
        padding: 2px 4px;
        cursor: pointer;
        margin-left: 2px;
        min-width: 50px;
        border-radius: 3px;
        transition: background .2s;

        &:hover {
            background: #c2affe;
        }

        &:active {
            background: #a08ddc;
        }

        &:last-child {
            font-weight: 700;
            min-width: 70px;
        }
    }

    &__title {
        margin: -4px;
        background: linear-gradient(90deg, rgba(148, 117, 178, .7), rgba(148, 117, 178, 0)) #C2AFFE;
        margin-bottom: 4px;
        padding: 2px 4px;
    }

    &__text {
        white-space: pre;
        padding: 3px 4px;
    }
}