/*
 * The few Hyva rules that may not wait for a Tailwind build.
 *
 * Everything else this module draws on Hyva lives in view/frontend/tailwind/tailwind-source.css and
 * reaches a storefront through the theme build, which is what Hyva's own documentation asks of an
 * extension. These five rules cannot: they are not decoration but state. The bar and the dialog are
 * rendered with the page and hidden here until JavaScript adds `_show`, so without them the dialog
 * and its overlay stand open on every page and the button that would close them does nothing. That
 * is the difference between a storefront that looks unstyled and one that is broken, and it is the
 * line our own notes draw (geo-ip solves the same problem with an inline style, which cannot work
 * here because `_show` is a state, not a static position).
 *
 * It also has to hold for the test matrix: the Hyva cell has no npm, so `npm run build` there fails
 * and is swallowed by `|| true`, and the acceptance tests drive this dialog.
 *
 * Written out rather than `@apply`-ed, because a file outside the build has no Tailwind to expand
 * them. Only the theme's own tokens are used, and those ship with the theme.
 */

.mst-gdpr__cookie-bar-wrapper {
    display:   none;
    position:  relative;
    z-index:   50;
}

.mst-gdpr__cookie-settings--cookie-modal-settings {
    display: none;
}

.mst-gdpr__cookie-settings--cookie-modal-settings._show {
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        fixed;
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    /* Over Hyva's sticky header, which was covering the dialog's own header on a phone: the close
       control was not clickable and the first lines were unreadable. This matches Luma's side. */
    z-index:         10003;
}

.mst-gdpr__cookie-settings--overlay {
    display: none;
}

.mst-gdpr__cookie-settings--overlay._show {
    display:          block;
    position:         fixed;
    top:              0;
    left:             0;
    width:            100%;
    height:           100%;
    background-color: var(--color-black);
    opacity:          .5;
    z-index:          10002;
}