.gsl-popups {
    display: contents;
}

dialog.gsl-popup {
    box-sizing: border-box;
    width: min(100% - (var(--wp--custom--spacing--lg, 1.875rem) * 2), var(--gsl-popup-width, 42rem));
    max-width: var(--gsl-popup-width, 42rem);
    max-height: calc(100dvh - (var(--wp--custom--spacing--lg, 1.875rem) * 2));
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wp--custom--color--on-surface, #3A3A38);
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
}

dialog.gsl-popup[open] {
    opacity: 1;
    transform: scale(1);
}

dialog.gsl-popup::backdrop {
    background: color-mix(in srgb, var(--wp--custom--color--primary, #3A3A38) 55%, transparent);
}

html:has(dialog.gsl-popup[open]),
body:has(dialog.gsl-popup[open]),
html.gsl-popup-open,
body.gsl-popup-open {
    overflow: hidden;
}

.gsl-popup--small {
    --gsl-popup-width: 28rem;
}

.gsl-popup--medium {
    --gsl-popup-width: 42rem;
}

.gsl-popup--large {
    --gsl-popup-width: 64rem;
}

.gsl-popup--fullscreen {
    --gsl-popup-width: calc(100vw - (var(--wp--custom--spacing--lg, 1.875rem) * 2));
    width: var(--gsl-popup-width);
    height: calc(100dvh - (var(--wp--custom--spacing--lg, 1.875rem) * 2));
}

.gsl-popup__panel {
    position: relative;
    max-height: inherit;
    overflow: auto;
    background: var(--wp--custom--color--surface-alt, var(--wp--custom--color--surface, #F3F0EB));
    color: var(--wp--custom--color--on-surface, #3A3A38);
    box-shadow: 0 1.25rem 4rem color-mix(in srgb, var(--wp--custom--color--primary, #3A3A38) 25%, transparent);
}

.gsl-popup--fullscreen .gsl-popup__panel {
    height: 100%;
}

.gsl-popup__header {
    padding: var(--wp--custom--spacing--lg, 1.875rem) var(--wp--custom--spacing--lg, 1.875rem) 0;
}

.gsl-popup__title {
    margin: 0;
    font-family: var(--wp--custom--heading--family, inherit);
    font-size: var(--wp--preset--font-size--heading-3, 1.5rem);
    font-weight: var(--wp--custom--heading--weight, 400);
    line-height: var(--wp--custom--heading--line-height, 1.1);
}

.gsl-popup__content {
    padding: var(--wp--custom--spacing--lg, 1.875rem);
}

.gsl-popup__close {
    position: absolute;
    inset-block-start: var(--wp--custom--spacing--xs, 0.625rem);
    inset-inline-end: var(--wp--custom--spacing--xs, 0.625rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--wp--custom--button--radius, 0);
    background: transparent;
    color: currentColor;
    cursor: pointer;
    font-size: var(--wp--preset--font-size--heading-4, 1.375rem);
    line-height: 1;
}

.gsl-popup__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}