html:has(.wtps-modal.is-open) {
    overflow: hidden;
}

.wtps-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--modal-bgcolor);
    color: var(--modal-color);
    z-index: 1000;
    padding: var(--modal-padding);
    align-items: start;
    overflow-y: auto;
    &.is-open {
        display: flex;
    }
    /* Floating (overlay) scrollbar styling */
    /* Thin overlay style for Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.35) transparent;

    /* WebKit-based browsers */
    &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    &::-webkit-scrollbar-track {
        background: transparent;
    }
    &::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.32);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12) inset;
        transition: background-color .18s, opacity .18s, transform .18s;
        opacity: 0.9;
    }
    /* Slightly more visible on hover */
    &:hover::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.54);
        transform: scaleX(1.02);
    }
    /* Make the scrollbar visually float: transparent track and subtle shadow */
    &::-webkit-scrollbar-thumb {
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
}

.wtps-modal-wrapper {
    position: relative;
    width: min(var(--modal-container-width), 100%);
    min-height: var(--modal-container-minheight);
    margin: auto;
}

.wtps-modal-container {
    color: var(--modal-container-color);
    background-color: var(--modal-container-bgcolor);
    border-radius: var(--modal-container-borderradius);
    padding: var(--modal-container-padding);
    position: relative;
    overflow: hidden;
}

[data-open-modal] {
    cursor: pointer;
}

.wtps-modal-button-close {
    position: var(--modal-close-btnposition);
    right: var(--modal-close-btnright);
    left: var(--modal-close-btnleft);
    top: var(--modal-close-btntop);
    bottom: var(--modal-close-btnbottom);
    background-color: var(--modal-close-bgcolor, var(--modal-color));
    color: var(--modal-close-color, var(--modal-bgcolor));
    padding: var(--modal-close-padding);
    display: var(--modal-close-display);
    z-index: 1;
    border-radius: var(--modal-close-borderradius);
    svg {
        fill: currentColor;
        width: var(--modal-close-iconsize);
        height: var(--modal-close-iconsize);
    }
}