@mixin modalStyling {

    // make the top-level .charsheet div the default root of "position: absolute;" elements
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    //- Use 'kmodal' instead of modal, because Roll20 already uses a 'modal' class

    .kmodal__button {
        all: initial;
        display: flex;
        margin: 0;
        padding: 0;
        cursor: pointer;
    }

    .kmodal__checkbox[type=checkbox] {
        display: none;
    }

    .kmodal__outer {
        opacity: 0;
        visibility: hidden;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        text-align: left;
        background: var(--kmodal-overlay-background);
        transition: opacity .25s ease;
        z-index: 999;
    }

    .kmodal__background {
        all: initial;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        cursor: pointer;
    }

    .kmodal__inner {
        position: fixed;
        width: var(--kmodal-width);
        height: var(--kmodal-height);
        inset: 0;
        margin: auto;
        overflow: auto;
        background: var(--kmodal-dialog-background);
        border-radius: 5px;
        padding: var(--kmodal-close-height) calc(var(--kmodal-close-width) * 3) var(--kmodal-close-height) calc(var(--kmodal-close-width) * 2);
        max-width: var(--kmodal-max-width);
        max-height: var(--kmodal-max-height);
        transition: opacity .25s ease;
        box-shadow: var(--kmodal-box-shadow);
    }


    .kmodal__close {
        position: absolute;
        right: var(--kmodal-close-width);
        top: var(--kmodal-close-height);
        width: var(--kmodal-close-width);
        height: var(--kmodal-close-height);
        cursor: pointer;
    }

    .kmodal__close:after,
    .kmodal__close:before {
        content: '';
        position: absolute;
        width: var(--kmodal-close-line-thickness);
        height: var(--kmodal-close-line-length);
        background: var(--kmodal-close-color);
        display: block;
        transform: rotate(45deg);
        left: 50%;
        margin: -3px 0 0 -1px;
        top: 0;
    }

    .kmodal__close:hover:after,
    .kmodal__close:hover:before {
        background: var(--kmodal-close-hover-color);
    }

    .kmodal__close:before {
        transform: rotate(-45deg);
    }

    .kmodal__checkbox:not(:checked)+.kmodal__outer {
        display: none;
    }

    .kmodal__checkbox:checked+.kmodal__outer {
        opacity: 1;
        visibility: visible;
    }

    .kmodal__checkbox:checked+.kmodal__outer .kmodal__inner {
        top: 0;
    }
}