dialog {
    &.modal {
        cursor: default;
        background-color: #fff;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        border: 1px solid @border-lightgrey;
        border-radius: @space-sm;
        transition: all 0.4s ease-in-out;
        display: flex;
        flex-direction: column;
        transform: translateY(-2rem);
        display: none;
        overflow: unset;
        z-index: 9998;
        inset: 0;
        padding: 0;
        position: relative;

        &::backdrop {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .grid-item {
            flex-wrap: wrap !important;
            div {
                word-wrap: break-word;
                white-space: normal;
            }
        }
        &.modal-xs {
            width: 30vw;
            max-height: 90vh;
        }

        &.modal-sm {
            width: 40vw;
            max-height: 90vh;

            @media screen and (max-width: 1250px) {
                width: 50vw;
            }
            @media screen and (max-width: 1050px) {
                width: 60vw;
            }
            @media screen and (max-width: 768px) {
                width: 95vw;
            }
        }

        &.modal-md {
            width: 50vw;
            max-height: 90vh;

            @media screen and (max-width: 1250px) {
                width: 60vw;
            }
            @media screen and (max-width: 1050px) {
                width: 70vw;
            }
            @media screen and (max-width: 768px) {
                width: 95vw;
            }
        }

        &.modal-lg {
            width: 60vw;
            max-height: 90vh;

            @media screen and (max-width: 1250px) {
                width: 70vw;
            }
            @media screen and (max-width: 1050px) {
                width: 80vw;
            }
            @media screen and (max-width: 768px) {
                width: 95vw;
            }
        }

        &.modal-xl {
            width: 80vw;
            max-height: 90vh;

            @media screen and (max-width: 1050px) {
                width: 90vw;
            }
            @media screen and (max-width: 768px) {
                width: 95vw;
            }
        }

        &.modal-full {
            width: 98vw;
            height: 98vw;
            max-height: 98vh;
        }

        & .modal-close {
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: @space-md;
            z-index: 1;
        }

        & .modal-content {
            padding: @space-md @space-lg;
            border-radius: @space-lg;
            flex-grow: 1;
            overflow: auto;
        }

        & .modal-header {
            height: 45px;
            padding: @space-sm @space-md;
            border-top-left-radius: @space-sm;
            border-top-right-radius: @space-sm;
            color: @textcolor;
            font-size: 1.1rem;
            font-weight: 600;
            background: @lightgrey;

            & > * {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }

        & .modal-footer {
            margin-top: @space-lg;
            padding: 0 @space-lg @space-lg @space-lg;
            border-bottom-left-radius: @space-sm;
            border-bottom-right-radius: @space-sm;

            & > * {
                display: flex;
                justify-content: end;
                gap: @space-sm;
            }
        }

        &[open] {
            display: flex;
            flex-direction: column;
            opacity: 1;
            transform: translateY(0);
            position: fixed;
        }
    }
}
