$width: 80vw;
$height: 75vh;

.typicms-modal {
    display: none;
    z-index: 10050;
    position: fixed;
    top: (100 - $height) * 0.5 - 3vh;
    left: (100 - $width) * 0.5 + 0vw;
    height: $height;
    width: $width;

    &-content {
        height: 100%;
    }

    &-open {
        display: block;
    }

    &-wrapper {
        height: 100%;
        background-color: #fff;
        overflow: auto;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
    }

    &:after {
        display: block;
        position: fixed;
        z-index: -1;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        content: '';
    }

    &-body {
        display: block;
        height: auto;
        flex-grow: 1;
        padding: 2rem;
    }

    &-btn-close {
        @extend .btn;
        @extend .btn-link;
        color: rgb(255 255 255 / 0.9);
        width: 35px;
        height: 35px;
        font-size: 35px;
        position: absolute;
        right: -2.625rem;
        top: -0.5rem;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2002;
        background-color: transparent;
        border: none;
        line-height: 0;
        &:hover {
            color: #fff;
        }
    }

    &-footer {
        padding: 2rem;
    }

    &-btn-add {
        @extend .btn;
        @extend .btn-primary;
    }
}