/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for
    MODAL
    that implement the UU design system specifically for Sitevision

    NOTE Background images in this file is copied from Designsystemet.
    CSS rules from Designsystemet are compressed by Sitevision and
    because these background images have spaces in the URL, they are
    not working. This is a bug in Sitevision and when this bug is fixed,
    these rules for background images can be removed from this file.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Modal needs to be displayed as block to be able to use the modal-backdrop. */
.modal {
    display: block;
}

/* Adjust z-index for modal and modal-backdrop to be able to place the modal
   on top of the scroll to top module but below the mini sidebar. */
.modal-backdrop {
    --bs-backdrop-zindex: 9995;
    opacity: var(--bs-backdrop-opacity);
}

.modal-guide {
    --bs-modal-zindex: 9996;
}

/* Modal alert */

.modal-alert .modal-dialog {
    margin-top: calc(var(--bs-modal-margin) * 2);
}

.modal-alert .modal-body {
    border-bottom: 0;
    border-right: 0;
    border-top: 0;
    margin-bottom: 0;
}

@media (min-width: 576px) {
    .modal-alert .modal-dialog {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Buttons */

.modal-language-link,
.modal-try-again-link {
    bottom: var(--space-extra-large);
    position: absolute;
}

.modal-language-link .icon-language:hover::after,
.modal-try-again-link .icon-try-again:hover::after {
    background-color: var(--color-black);
    border-color: transparent;
    filter: invert(0);
    transition: background-color 0.5s ease;
}

.modal-cancel-link {
    bottom: var(--space-extra-large);
    position: absolute;
    right: var(--space-extra-large);
}

@media (max-width: 376px) {
    .modal-cancel-link {
        right: var(--space-large);
    }
}

@media (hover: none) {
    .modal-cancel-link .icon-done:hover::after,
    .modal-language-link .icon-language:hover::before,
    .modal-try-again-link .icon-try-again:hover::after {
        filter: invert(1);
    }

    .modal-next-link .icon-call-to-action:hover::after,
    .modal-back-link .icon-back:hover::after,
    .modal-done-link .icon-done:hover::after {
        background-color: transparent;
        filter: invert(0.6);
    }
}

/* Icons */

.icon-back::after {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhZ2VyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO30KCS5zdDF7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsMGgyNHYyNEgwVjB6Ii8+CjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yMCwxMUg3LjhsNS42LTUuNkwxMiw0bC04LDhsOCw4bDEuNC0xLjRMNy44LDEzSDIwVjExeiIvPgo8L3N2Zz4K);
}

.icon-done::after {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23FFFFFF'%3e%3cpath d='M0 0h24v24H0V0z' fill='none'/%3e%3cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3e%3c/svg%3e");
}

.icon-cancel::after {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFnZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMCwwaDI0djI0SDBWMHoiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xMiwyQzYuNSwyLDIsNi41LDIsMTJzNC41LDEwLDEwLDEwczEwLTQuNSwxMC0xMFMxNy41LDIsMTIsMnogTTEyLDIwYy00LjQsMC04LTMuNi04LThzMy42LTgsOC04czgsMy42LDgsOA0KCVMxNi40LDIwLDEyLDIweiBNMTUuNiw3TDEyLDEwLjZMOC40LDdMNyw4LjRsMy42LDMuNkw3LDE1LjZMOC40LDE3bDMuNi0zLjZsMy42LDMuNmwxLjQtMS40TDEzLjQsMTJMMTcsOC40TDE1LjYsN3oiLz4NCjwvc3ZnPg0K);
}

.icon-delete::after {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFnZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMCwwaDI0djI0SDBWMHoiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xNiw5djEwSDhWOUgxNiBNMTQuNSwzaC01bC0xLDFINXYyaDE0VjRoLTMuNUwxNC41LDN6IE0xOCw3SDZ2MTJjMCwxLjEsMC45LDIsMiwyaDhjMS4xLDAsMi0wLjksMi0yVjd6Ii8+DQo8L3N2Zz4NCg==);
}