.#{$pui}modal {
    box-shadow: $shadow-default;

    background-color: $color-white;

    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-radius: $border-radius;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: $modal-padding;

        border-bottom-width: 1px;
        border-style: solid;
        border-color: $color-border-gray;
        border-top-left-radius: $border-radius;
        border-top-right-radius: $border-radius;

        background-color: $color-white;
        color: $color-black;

        @include ui-colors($hover: false);

        .title {
            h1 {
                font-size: $size-medium;
                font-weight: $font-weight-medium;
            }

            span {
                opacity: .7;
            }
        }

        .actions {
            .close {
                border-width: 0;
                background: transparent;
                padding: 0;
                font-size: $icon-size-medium;
                cursor: pointer;
                opacity: .6;
                color: inherit;

                @include transitions;
                transition-property: opacity;

                &:hover {
                    opacity: 1;
                }
            }
        }
    }

    .modal-content {
        padding: $modal-padding;
        max-height: calc(100vh - 250px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        padding: $modal-footer-padding;

        border-top-width: 1px;
        border-style: solid;
        border-color: $color-border-gray;
    }
}

.#{$pui}modal-wrapper {
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

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


    .background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        background-color: rgba($color-black, $modal-bg-opacity);
        z-index: 1;
    }

    .#{$pui}modal {
        position: relative;
        z-index: 2;
    }
}