:root {
    --modal-size-small: 25rem;
    --modal-size-medium: 30rem;
    --modal-size-default: 40rem;
    --modal-size-large: 50rem;
    --modal-size-extra-large: 65rem;
}

/* Modal Backdrop */
[ui-modal-backdrop] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, #0c0b0e 85%, transparent);
    z-index: 8888;
    backdrop-filter: blur(0.2rem);
    user-select: none;
    transition: opacity 300ms;
}

[ui-modal-backdrop="hidden"] {
    opacity: 0;
    pointer-events: none;
}

[ui-modal-backdrop="shown"] {
    opacity: 1;
}

/* Modal dialog main */
[ui-modal-layout] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    pointer-events: none;
}

[ui-modal-dialog] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    width: 100%;
    max-height: calc(100vh - 0rem);
    /* overflow-y: hidden; */
    scrollbar-gutter: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transform: translate(-50%, -100%) scale(110%);
    opacity: 0;
    pointer-events: none;
    transition: all 300ms ease-out;
    box-sizing: border-box;
    padding: 1rem 0rem;
    filter: blur(0.5rem);
}

[ui-modal-dialog].open {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0rem);
    transform: translate(-50%, -50%) scale(100%);
}

[ui-modal-dialog].closing {
    opacity: 0;
    filter: blur(1rem);
    transform: translate(-50%, 0%) scale(90%);
}

/* Modal dialog sizes */
[ui-modal-dialog][modal-size="small"] {
    max-width: var(--modal-size-small);
}

[ui-modal-dialog][modal-size="medium"] {
    max-width: var(--modal-size-medium);
}

[ui-modal-dialog][modal-size="default"] {
    max-width: var(--modal-size-default);
}

[ui-modal-dialog][modal-size="large"] {
    max-width: var(--modal-size-large);
}

[ui-modal-dialog][modal-size="extra-large"] {
    max-width: var(--modal-size-extra-large);
}

@media (width < 26.25rem) {

    /* 26.25rem = 420px */
    [ui-modal-dialog][modal-size="small"] {
        max-width: 100%;
        padding: 0.75rem;
    }
}

@media (width < 32.5rem) {

    /* 32.5rem = 520px */
    [ui-modal-dialog][modal-size="medium"] {
        max-width: 100%;
        padding: 0.75rem;
    }
}

@media (width < 41.875rem) {

    /* 41.875rem = 670px */
    [ui-modal-dialog][modal-size="default"] {
        max-width: 100%;
        padding: 0.75rem;
    }
}

@media (width < 52.5rem) {

    /* 52.5rem = 840px */
    [ui-modal-dialog][modal-size="large"] {
        max-width: 100%;
        padding: 0.75rem;
    }
}

@media (width < 68.75rem) {

    /* 68.75rem = 1100px */
    [ui-modal-dialog][modal-size="extra-large"] {
        max-width: 100%;
        padding: 0.75rem;
    }
}

[ui-modal-dialog].has-scroll {
    overflow-y: auto;
}

[ui-modal-dialog]::-webkit-scrollbar {
    display: none;
}

[ui-modal-dialog]::-webkit-scrollbar-track {
    background: transparent;
}

[ui-modal-dialog]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.158);
    border-radius: 50%;
}