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

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

    IMPORTANT! Do not enable compression for this file in Sitevision.

    There is a known bug in Sitevision's CSS compressor: it removes spaces
    inside data: URLs used for background images. Designsystemet's own CSS
    is compressed by Sitevision, which breaks those background images. This
    file contains override rules for the affected images. Once Sitevision
    fixes this bug, these override rules 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==);
}