:root {
	--fr-scrollbar-width: 17px;
	--fr-modal-body-offset-vertical: 3rem;
	--fr-modal-body-offset-horizontal: 3rem;
}

.fr-modal {
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	padding-inline-start: var(--fr-modal-body-offset-horizontal);
	padding-inline-end: var(--fr-modal-body-offset-horizontal);
	padding-block-start: var(--fr-modal-body-offset-vertical);
	padding-block-end: var(--fr-modal-body-offset-vertical);
	transition: visibility var(--fade-in-time), opacity var(--fade-in-time);
	/* pointer-events: none; */
}

.fr-modal--hide {
	display: none;
}

.fr-modal .fr-modal__body {
	transform: scale(0.99) translateY(0.6rem);
    transition: transform var(--fade-in-time);
}

.fr-modal.fr-modal--open .fr-modal__body {
	transform: scale(1) translateY(0);
	transition: transform var(--fade-in-time);
}

.fr-modal.fr-modal--closing {
    visibility: hidden;
    opacity: 0;
    transition: visibility var(--fade-out-time), opacity var(--fade-out-time);
}

.fr-modal.fr-modal--closing .fr-modal__body {
    transform: scale(0.99) translateY(0.6rem);
    transition: transform var(--fade-out-time);
}

.fr-modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.fr-modal__trigger--higher-index {
	z-index: 99999999;
}

.fr-modal__body {
	position: relative;
	z-index: 1000;
	box-sizing: border-box;
	max-width: calc(100% - var(--fr-modal-body-offset-horizontal) * 2);
	max-height: calc(100% - var(--fr-modal-body-offset-vertical) * 2);
}

.fr-modal__close-icon-wrapper {
	position: absolute;
	aspect-ratio: 1;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 1001;
}

.fr-modal__close-icon {
	line-height: 1;
	background-color: transparent;
}

.fr-modal--open,
.iframe .fr-modal {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
    transition: visibility var(--fade-in-time), opacity var(--fade-in-time);
}

.iframe .fr-modal {
	display: none;
}

/* Clicking outside modal breaks modal */

.iframe .fr-modal {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

/* FIX Can't access children when there are more than 1 modals on page */

.iframe .fr-modal {
	display: flex !important;
}

.iframe .fr-modal[fr-builder="hide"],
.iframe [data-fr-modal="true"] {
	display: none !important;
	pointer-events: none !important;
	z-index: -1 !important;
}

.iframe .fr-modal:has(.fr-modal[fr-builder="hide"]) {
	display: none !important;
}

/*FIX Templated model that stays opened overlays other pages/tempaltes */

.brx-body.iframe .fr-modal:not([data-index]) {
	display: none;
}

.brx-body.iframe .brxe-fr-modal:not([data-index]) *,
.brx-body.iframe .brxe-fr-modal:not([data-index]) {
	display: none;
	pointer-events: none;
}

.iframe main.bricks-static-content {
	z-index: -1;
}

/* Scrollable modal */

.fr-modal[data-fr-modal-scroll="true"] .fr-modal__body {
	overflow-y: scroll;
}

.fr-modal[data-fr-modal-scrollbar="true"] .fr-modal__body::-webkit-scrollbar {
	display: none;
}

.fr-modal[data-fr-modal-scrollbar="true"] .fr-modal__body {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

/* scrolling preventer */

body.fr-modal-prevent-scroll {
	overflow-y: hidden;
}

body.fr-modal-body-padding {
	padding-right: var(--fr-scrollbar-width);
}