/* Email popup

A native <dialog>, so the focus trap and Esc to close come from the browser.
It is pinned to the top right corner and the backdrop is transparent, so the
page stays visible behind it. module.js only opens it and copies.
*/

.fl_popup {
    --fl-popup-duration: 240ms;
    --fl-popup-easing: cubic-bezier(0.32, 0.72, 0, 1);

    /* The gap between the panel and the top and right edges of the viewport. */
    --fl-popup-offset: 16px;

    /* The browser centres a dialog with inset: 0 and margin: auto. Replacing the
       top and right margins with the offset pins it to that corner instead, and
       auto on the other two keeps it from stretching. */
    margin: var(--fl-popup-offset) var(--fl-popup-offset) auto auto;
    width: min(320px, calc(100vw - (var(--fl-popup-offset) * 2)));
    max-width: none;
    max-height: calc(100dvh - (var(--fl-popup-offset) * 2));
    padding: 0;
    overflow: hidden auto;
    border: 0;
    border-radius: var(--border-radius-large);
    background-color: var(--color-sand);
    color: var(--color-black);
}

.fl_popup::backdrop {
    /* No dimming. The pseudo-element still covers the page, which is what carries
       the click-outside-to-close in module.js. */
    background-color: transparent;
}

/* The backdrop click in module.js works by the click landing on the dialog itself,
   which only holds true while the dialog has no padding of its own. */

.fl_popup_inner {
    position: relative;
}

.fl_popup_image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-large);
    padding: 4px;
}

.fl_popup_title {
    margin-bottom: 0.75rem;
    text-align: center;
    margin-top: 0;
        /* font-size: var(--font-size-h3); */
}

/* The text field is plain text with allow_new_line on, so line breaks the editor
   types are real newlines rather than markup and need pre-line to show up. */

.fl_popup_text {
    white-space: pre-line;
}

.fl_popup_body {
    padding: 1.5rem;
}

.fl_popup_body > *:last-child {
    margin-bottom: 0;
}

.fl_popup_close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    padding: 0.8rem;
    cursor: pointer;
    line-height: 0;
    background-color: white;
    border-radius: 50%;
}

.fl_popup_close_icon {
    width: 12px;
    height: 12px;
}

/* Centred the same way button.module does it: a wrapper that centres its text,
   which the inline-flex button follows. The class is prefixed because this file
   is not scoped, unlike the one inside button.module. */

.fl_popup_button_wrapper {
    text-align: center;
}

.fl_popup_copy {
    cursor: pointer;
}

/* The same hover the theme's buttons use, repeated here on purpose: those rules
   live in button.module/module.css, which HubSpot only loads on pages that
   actually render a Button module. The icon is drawn with currentColor, so it
   follows the text colour on its own.

   Both properties are always set together, and .fl_popup raises these above the
   0-3-0 of button.module's equivalents. That is what keeps the label readable:
   the base rule in _buttons.css is `button, .button { color: black }`, so any
   hover rule that wins with a dark background but no colour of its own leaves
   black text on it. Scoping means background and text always arrive together
   from one of the two rules below. */

.fl_popup .fl_popup_copy:hover,
.fl_popup .fl_popup_copy:focus-visible {
    background-color: black;
    color: white;
}

.fl_popup .fl_popup_copy.has_bg_color_lime:hover,
.fl_popup .fl_popup_copy.has_bg_color_lime:focus-visible {
    background-color: white;
    color: black;
}

/* Copied state. The button is the only feedback now, so it carries all of it:
   the label, the icon and the colour. Both states are in the markup and one of
   each is hidden, which keeps module.js to a single class toggle.

   Scoped under .fl_popup so these beat the hover rules above and the identical
   ones in button.module, whose stylesheet load order is not guaranteed. This is
   deliberately the only button in the theme that behaves this way. */

.fl_popup_copy_state--copied {
    display: none;
}

.fl_popup_copy.is-copied .fl_popup_copy_state--idle {
    display: none;
}

.fl_popup_copy.is-copied .fl_popup_copy_state--copied {
    display: inline;
}

.fl_popup .fl_popup_copy.is-copied,
.fl_popup .fl_popup_copy.is-copied:hover,
.fl_popup .fl_popup_copy.is-copied:focus-visible {
    /* The pointer is still on the button right after the click, so the hover
       rules have to be answered here or the sunset never shows. */
    background-color: var(--color-sunset);
    color: black;
}

/* No scroll lock. module.js still toggles .fl_popup_lock on the body while the
   popup is open, but with the page in full view behind it there is nothing to
   lock, so the class is deliberately left unstyled. */

/* Fade in. Browsers without @starting-style or allow-discrete simply show the
   dialog straight away, which is the same as no animation at all. */

@media (prefers-reduced-motion: no-preference) {
    .fl_popup {
        opacity: 0;
        transition:
            opacity var(--fl-popup-duration) var(--fl-popup-easing),
            overlay var(--fl-popup-duration) allow-discrete,
            display var(--fl-popup-duration) allow-discrete;
    }

    .fl_popup[open] {
        opacity: 1;
    }

    @starting-style {
        .fl_popup[open] {
            opacity: 0;
        }
    }
}

/* On a phone the top right corner sits under the thumb's reach and over the
   header, so the panel moves to the bottom and centres itself. inset: 0 is still
   doing the work: auto on three sides centres horizontally and pushes it down,
   the offset on the fourth holds it off the bottom edge. The breakpoint is the
   one theme.json declares for mobile. */

@media (max-width: 767px) {
    .fl_popup {
        margin: auto auto var(--fl-popup-offset);
    }
}

/* Fallback for browsers with no <dialog> support: module.js toggles the open
   attribute and this places the panel by hand. */

@supports not selector(dialog::backdrop) {
    .fl_popup {
        position: fixed;
        top: var(--fl-popup-offset);
        right: var(--fl-popup-offset);
        left: auto;
        z-index: 1000;
        margin: 0;
        height: fit-content;
    }

    .fl_popup:not([open]) {
        display: none;
    }

    @media (max-width: 767px) {
        .fl_popup {
            top: auto;
            right: 0;
            bottom: var(--fl-popup-offset);
            left: 0;
            margin: 0 auto;
        }
    }
}