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

    This file contains rules for
    SEARCH
    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. This file contains SVG
    icons embedded as data: URLs where spaces between SVG attributes are
    required. Removing those spaces corrupts the images. Once Sitevision
    fixes this bug, compression can be re-enabled for this file.

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


/* The search form */

.sv-facetedsearch-portlet form div[role="search"],
.sv-searchform-portlet form div[role="search"] {
    justify-content: space-between;
    margin-bottom: 1em;
    display: flex;
}

.sv-facetedsearch-portlet input[type="text"],
.sv-searchform-portlet input[type="text"] {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFnZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNDQ0NDQ0M7fQ0KCS5zdDF7ZmlsbDpub25lO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTUuNSwxNGgtMC44bC0wLjMtMC4zYzEtMS4xLDEuNi0yLjYsMS42LTQuMkMxNiw1LjksMTMuMSwzLDkuNSwzUzMsNS45LDMsOS41UzUuOSwxNiw5LjUsMTYNCgljMS42LDAsMy4xLTAuNiw0LjItMS42bDAuMywwLjN2MC44bDUsNWwxLjUtMS41TDE1LjUsMTR6IE05LjUsMTRDNywxNCw1LDEyLDUsOS41UzcsNSw5LjUsNVMxNCw3LDE0LDkuNVMxMiwxNCw5LjUsMTR6Ii8+DQo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMCwwaDI0djI0SDBWMHoiLz4NCjwvc3ZnPg0K);
    background-position: left 0.5em center;
    background-repeat: no-repeat;
    background-size: 2em;
    flex-grow: 1;
    margin-right: .75rem;
    padding-right: 1.25rem;
    padding-left: 2.75em;
}

.sv-facetedsearch-portlet input[type="submit"],
.sv-searchform-portlet input[type="submit"] {
    background-color: var(--color-button);
    border: 3px solid var(--color-button);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--color-white);
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: .05em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: filter 200ms ease-in-out, transform 150ms ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.sv-facetedsearch-portlet input[type="submit"]:hover,
.sv-searchform-portlet input[type="submit"]:hover {
    background-color: var(--color-button-hover);
    border-color: var(--color-button-hover);
}

/* Suggestions */

ul.sv-autocomplete-search-result {
    background-color: var(--bs-body-bg);
}

ul.sv-autocomplete-search-result .sv-autocomplete-result-item {
    padding: 0.5em 1em;
}

ul.sv-autocomplete-search-result .sv-autocomplete-result-item:hover {
    cursor: pointer;
}

ul.sv-autocomplete-search-result {
    font-family: WorkSans, sans-serif;
    font-size: var(--font-size-regular);
}

@media (prefers-color-scheme: dark) {
    ul.sv-autocomplete-search-result .sv-autocomplete-result-item:hover {
        background-color: var(--color-grey-light);
    }

    ul.sv-autocomplete-search-result .sv-autocomplete-result-item a {
        color: var(--color-text);
    }
}


/* Hide the placeholder text in the search input element */

.sv-facetedsearch-portlet input::placeholder,
.sv-searchform-portlet input::placeholder {
    visibility: hidden;
}


/* Search facets - override the sitevision style */

.sv-search-facets {
    float: none !important;
    padding: 0 !important;
}

.sv-search-facets ul {
    max-width: 100%;
}


/* Search facets - add UU style */

.sv-search-facet-item {
    background-color: var(--color-grey-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-text);
    display: inline-block;
    font-size: var(--font-size-regular);
    letter-spacing: 0.05em;
    margin-right: 0.5rem;
    padding: 0.45rem 0.8rem !important;
    text-align: center;
}

.sv-search-facet-item-selected::before {
    content: '';
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFnZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMCwwaDI0djI0SDBWMHoiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xOSw2LjRMMTcuNiw1TDEyLDEwLjZMNi40LDVMNSw2LjRsNS42LDUuNkw1LDE3LjZMNi40LDE5bDUuNi01LjZsNS42LDUuNmwxLjQtMS40TDEzLjQsMTJMMTksNi40eiIvPg0KPC9zdmc+DQo=);
    background-repeat: no-repeat;
    display: inline-block;
    filter: invert(1);
    height: 1em;
    vertical-align: text-bottom;
    width: 1em;
}

@media (prefers-color-scheme: dark) {
    .sv-search-facet-item-selected::before {
        filter: invert(0.1);
    }
}

.sv-search-facet-item a {
    color: var(--color-text) !important;
}


/* The search results  */

.sv-search-result {
    max-width: 100%;
}


/* Paragraphs in the search results  */

.sv-facetedsearch-portlet p {
    margin: 1em 0;
}

.sv-facetedsearch-portlet p:last-child {
    margin-bottom: 0;
}


/* The search hit */

.sv-search-hit {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 1.25em !important;
}

.sv-search-hit+.sv-search-hit {
    border-top: none;
}

.sv-search-hit a {
    text-decoration: underline;
}


/* The path (that doesn't have a specific css class) */

.sv-search-hit p+p:last-child {
    font-size: var(--font-size-small);
    max-width: 100%;
}

.sv-search-hit p+p:last-child a {
    color: var(--color-text-muted);
}


/* search button for header has dropdown element */

.search-portlet-wrapper {
    background-color: var(--bs-body-bg);
    box-shadow: rgb(0, 0, 0, 0.2) 0 0.5em 0.5em;
    display: flex;
    height: var(--uu-calc-height);
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: var(--header-height, 120px);
    transition: height 0.3s ease-in-out;
    z-index: 10;
}


.search-portlet-wrapper>.container {
    align-self: center;
}

.search-portlet-wrapper.hidden {
    height: 0px;
}

.search-portlet-wrapper .link-group {
    margin-top: 0.5rem;
    margin-bottom: -0.5rem;
    text-align: start;
}

.search-portlet-wrapper .link-group-item {
    margin: 0 0.5rem 0.5rem 0;
}

@media (max-width: 992px) {
    .search-result-hit-text-container {
        margin-right: 0 !important;
    }
}

/* Transparent background for pagination */
.sv-facetedsearch-portlet .pagination span,
.sv-facetedsearch-portlet .pagination a {
    background-color: transparent;
    border-color: var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
}

.sv-facetedsearch-portlet .pagination span.current {
    background-color: var(--color-grey-light);
    border-color: var(--color-active-grey);
}

.sv-facetedsearch-portlet .pagination span.current.prev,
.sv-facetedsearch-portlet .pagination span.current.next {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-disabled);
}

.sv-facetedsearch-portlet .pagination a:hover {
    background-color: var(--color-grey-light);
    border-color: var(--color-active-grey);
}

/*********************************
	Website search (Extern/MI/SI)
*********************************/

/* Use flex for facets so that long facet names don't wrap */
.website-search-facets-container {
    margin: var(--space-medium) 0;
}

.website-search-facets-container ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

.website-search-facet-item {
    background-color: var(--color-grey-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-text);
    display: inline-block;
    font-size: var(--font-size-regular);
    letter-spacing: 0.05em;
    padding: 0.45rem 0.8rem !important;
    text-align: center;
}

.website-search-facet-item-selected::before {
    content: '';
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFnZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMCwwaDI0djI0SDBWMHoiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xOSw2LjRMMTcuNiw1TDEyLDEwLjZMNi40LDVMNSw2LjRsNS42LDUuNkw1LDE3LjZMNi40LDE5bDUuNi01LjZsNS42LDUuNmwxLjQtMS40TDEzLjQsMTJMMTksNi40eiIvPg0KPC9zdmc+DQo=);
    background-repeat: no-repeat;
    display: inline-block;
    filter: invert(1);
    height: 1em;
    vertical-align: text-bottom;
    width: 1em;
}

@media (prefers-color-scheme: dark) {
    .website-search-facet-item-selected::before {
        filter: invert(0.1);
    }
}

.website-search-facet-item a {
    color: var(--color-text) !important;
}

/********************************
    Webapp search
********************************/

/* Set margin bottom to 0 for the search module so the modules has height zero when it does
   not display any content. If a content is displayed the margin will be set by module itself */
.sv-se-uu-uit-webb-webapp-search {
    margin-bottom: 0 !important;
}

/* Set style of the search form, if the search form is the last child, but only in webapp search,
   add a margin bottom */
.search .search-form:last-child {
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .search-form {
        flex-wrap: wrap;
    }
}

/* Set style of selects in the search form */
.search-form-select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border-radius: 0;
    color: var(--color-text);
    padding-right: 2.75rem;
    z-index: 2;
}

@media (max-width: 768px) {
    .search-form-select {
        flex-basis: 100%;
        border-right-color: var(--color-form-control);
        margin-bottom: var(--space-small);
    }
}

/* Explicitly set the border radius to 0 to avoid some browsers adding a border radius */
.search-form-input {
    background-color: var(--bs-body-bg);
    border-radius: 0;
    width: auto;
    z-index: 1;
}

.search-form-input:focus {
    z-index: 4;
}

/* Set style of the search form suggestions */
.search-form-suggestions {
    background-color: var(--bs-body-bg);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    line-height: 1.42857143;
    list-style: none;
    margin: 0;
    max-width: none;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 4;
}

.search-form-suggestions li {
    padding: 0.5em 1em;
}

.search-form-suggestions li.active,
.search-form-suggestions li:hover {
    background-color: var(--color-grey-light);
}

.search-form-suggestions li:hover {
    cursor: pointer;
}

.search-form-suggestions li mark {
    background-color: transparent;
    color: var(--color-text);
    font-weight: bold;
    padding: 0;
}

/* Set style of the search input on small screens */
@media (max-width: 400px) {
    .search-form-input {
        flex-basis: 50%;
        min-width: 0;
    }
}

/* Adjust z-index of search facets */
.search-filters-selected {
    z-index: 3;
}

/* Set style of the search facets button */
.search-selected-facets-button,
.search-selected-facets-button:hover {
    text-align: left;
}

/* Set a slightly smaller padding on the facet buttons to allow for long facet names. Also allow
   hyphenation in the facet names. */
.search-facet-button {
    -webkit-hyphenate-limit-after: 5;
    -webkit-hyphenate-limit-before: 4;
    hyphenate-limit-chars: 10 4 5;
    hyphens: auto;
    overflow-wrap: break-word;
    padding: 0.45rem 0rem;
    white-space: normal;
    word-break: break-word;
}

.search-facet-button:hover {
    padding: 0.45rem 0rem;
}

.search-facet-button.button-icon {
    padding: 0.45rem 0.8rem;
}

.search-show-more-facets-button,
.search-show-more-facets-button:hover {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
}

/* Set list style of list of facet values */
.search-facet-values {
    list-style: none;
    padding: 0;
}

/* Align the facet values to the left */
.search-facet-values-button,
.search-facet-values-button:hover {
    align-items: center;
    display: flex;
    text-align: left;
}

/* Set style of disabled facet values */
.search-facet-values-button[disabled] {
    background: none !important;
    border-color: transparent !important;
}

.search-facet-values-button[disabled]::before {
    filter: invert(0.5) !important;
}

/* Set style of the search label */
.search-label {
    font-weight: normal;
}

/* The search result info and feed should have some margin */
.search-result-information-and-feed {
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.search-result-information-and-feed:has(a),
.search-result-information-and-feed:has(button) {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.375rem;
    margin-top: 1.375rem;
}

.search-result-information-and-feed div:nth-child(2) {
    white-space: nowrap;
}

.search-result-information-and-feed button.active {
    background-color: var(--color-grey);
    border-color: var(--color-grey);
}

@media (prefers-color-scheme: dark) {
    .search-result-information-and-feed button.active {
        background-color: var(--color-button-hover);
        border-color: var(--color-button-hover);
        color: var(--color-white);
    }

    .search-result-information-and-feed button.active::before {
        filter: invert(1) !important;
    }
}

.search-result-information-and-feed button.active:hover {
    background-color: var(--color-button-hover);
    border-color: var(--color-button-hover);
}

@media (prefers-color-scheme: dark) {
    .search-result-information-and-feed button.active:hover {
        background-color: var(--color-button);
        border-color: var(--color-button);
    }
}

@media screen and (max-width: 576px) {
    .search-result-information-and-feed button,
    .search-result-information-and-feed a {
        padding: 0.45rem 0.6rem !important;
    }
}

.search-result-information-and-feed .icon-calendar-add::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23ffffff"><path d="M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80Zm-480-80q-33 0-56.5-23.5T120-240v-480q0-33 23.5-56.5T200-800h40v-80h80v80h240v-80h80v80h40q33 0 56.5 23.5T760-720v244q-20-3-40-3t-40 3v-84H200v320h280q0 20 3 40t11 40H200Zm0-480h480v-80H200v80Zm0 0v-80 80Z"/></svg>');
}

.search-result-information-and-feed .icon-rss-feed::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23ffffff"><path d="M143.5-143.5Q120-167 120-200t23.5-56.5Q167-280 200-280t56.5 23.5Q280-233 280-200t-23.5 56.5Q233-120 200-120t-56.5-23.5ZM680-120q0-117-44-218.5T516-516q-76-76-177.5-120T120-680v-120q142 0 265 53t216 146q93 93 146 216t53 265H680Zm-240 0q0-67-25-124.5T346-346q-44-44-101.5-69T120-440v-120q92 0 171.5 34.5T431-431q60 60 94.5 139.5T560-120H440Z"/></svg>');
}

.search-result-information-calendar-feed-information {
    background-color: var(--color-grey-light);
    border: 1px solid var(--color-border);
    margin-bottom: 1rem;
    padding: 1.25rem;
}

.search-result-information-calendar-feed-information h3 {
    margin: 0 0 0.75rem 0;
}

.search-result-information-calendar-feed-information button:last-child {
    margin-bottom: 0;
}

.search-result-information-calendar-feed-url {
    background-color: var(--bs-body-bg);
    color: var(--color-text) !important;
    margin-bottom: 1rem;
    min-height: 0;
    overflow: hidden;
    resize: none;
}

@media print {
    .search-result-information-and-feed a,
    .search-result-information-and-feed button {
        display: none;
    }
}

.search-result-hit-container {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
}

/* Any ul in the search hit should have no dots and no padding */
.search-result-hit ul {
    list-style: none;
    max-width: none;
    padding: 0;
}

.search-result-hit a:hover {
    text-decoration: underline;
}

/* Set cursor to pointer on hover to indicate that the hits are clickable */
.search-result-hit:hover {
    cursor: pointer;
}

/* Set style of the mark of the search result when hovering */
.search-result-hit:hover mark {
    background-color: var(--color-grey);
}

/* Style links in the search result details part */
.search-result-hit .text-muted a {
    color: var(--color-text-muted) !important;
    text-decoration: underline;
}

.search-result-hit .text-muted a:hover {
    background-color: var(--color-grey);
    color: var(--color-text) !important;
}


/* Style of search result hit with display mode text */

/* Images should be displayed to the left and hits shouldn't have any borders */
.search-result-hit-display-mode-text .card,
.search-result-hit-display-mode-text .card ul,
.search-result-hit-display-mode-text .card-body,
.search-result-hit-display-mode-text .search-result-hit {
    background: none;
    border: none;
    padding-left: 0;
}

/* The search hit should not have any left and right padding */
.search-result-hit-display-mode-text .search-result-hit-container {
    padding-left: 0;
    padding-right: 0;
}

/* Normally we do mobile first, but in this case the default style of search hits works almost fine
   on larger screens. */
@media (max-width: 767px) {
    .search-result-hit-display-mode-text .search-result-hit-container {
        display: flex;
        position: static !important;
    }

    .search-result-hit-display-mode-text .search-result-hit-text-container::before {
        display: none !important;
    }

    .search-result-hit-display-mode-text .search-result-hit-image {
        margin-top: 0.5rem;
        position: static !important;
    }
}

.search-result-hit-display-mode-text .search-result-hit:hover {
    cursor: default;
}

.search-result-hit-display-mode-text .search-result-hit-container {
    flex-direction: row-reverse;
}

.search-result-hit-display-mode-text .search-result-hit-text-container {
    flex-grow: 1;
    overflow-wrap: break-word;
    word-break: break-word;
}

.search-result-hit-display-mode-text .search-result-hit-image {
    cursor: pointer;
    margin-right: 1.5rem;
    text-align: left;
}

.search-result-hit-display-mode-text .search-result-hit .search-result-hit-text-container a {
    color: var(--color-link) !important;
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .search-result-hit-display-mode-text .search-result-hit .search-result-hit-text-container a:hover {
        color: var(--color-link-hover-dark-mode) !important;
    }
}

.search-result-hit-display-mode-text .search-result-hit:hover .search-result-hit-text-container .search-result-hit-title a,
.search-result-hit-display-mode-text .search-result-hit:hover .search-result-hit-text-container a {
    color: var(--color-link) !important;
}

@media (prefers-color-scheme: dark) {
    .search-result-hit-display-mode-text .search-result-hit .search-result-hit-text-container .search-result-hit-title a:hover,
    .search-result-hit-display-mode-text .search-result-hit .search-result-hit-text-container a:hover {
        color: var(--color-link-hover-dark-mode) !important;
    }
}

/* The search result title should have the same color as the rest of the text */
.search-result-hit-title a {
    color: var(--color-text) !important;
}

/* Style of the search result hit title */
.search-result-hit-title {
    margin-top: 0;
}

/* Style of the search result hit info with date and source */
.search-result-hit-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.85rem;
    margin-bottom: var(--space-small);
    margin-top: calc(-1 * var(--space-small) / 1.25);
}

.search-result-hit-info-date,
.search-result-hit-info-date-event,
.search-result-hit-info-source {
    display: inline-block;
}

.search-result-hit-info-date::before,
.search-result-hit-info-date-event::before,
.search-result-hit-info-source::before {
    background-size: 1rem;
    height: 1rem;
    margin-right: 0.35rem;
    min-width: 1rem;
    width: 1rem;
}

.search-result-hit-info-date::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'><path d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z'/></svg>");
}

.search-result-hit-info-date-event::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'><path d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z'/></svg>");
}

.search-result-hit-info-source::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'><path d='M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z'/></svg>");
}

/* Style of the search result hit image */
.search-result-hit-image {
    margin-bottom: 0.5rem !important;
    margin-top: 1rem;
    width: 100%;
}

.search-result-hit-image img {
    height: auto;
    max-width: 100%;
    width: 100%;
}

/* Style of the search result hit on large screens */
@media (min-width: 768px) {

    /* On large screens the search result hit should be displayed as a flexbox */
    .search-result-hit-container {
        display: flex;
        flex-direction: row;
    }

    /* The search result hit text should have some margin on the right */
    .search-result-hit-text-container {
        margin-right: 1rem;
    }

    /* The style of the search result hit image on large screens */
    .search-result-hit-image {
        margin-bottom: 0.5rem;
        margin-left: auto;
        margin-top: 0.5rem;
        max-width: var(--search-result-hit-image-max-width);
        text-align: right;
    }

    .search-result-hit-image img {
        max-height: var(--search-result-hit-image-max-height);
        max-width: 100%;
        width: auto;
    }
}

/* Add styling for details in search result */
.search-result-hit-details {
    max-width: none;
}

.search-result-hit-details .icon-position-left::before {
    background-size: 1.1rem;
    filter: invert(0.65);
    height: 1.1rem;
    margin-right: 0rem;
    min-width: 1.1rem;
    width: 1.1rem;
}

@media (prefers-color-scheme: dark) {
    .search-result-hit-details .icon-position-left::before {
        filter: invert(0.2);
    }
}

/* Add styling for spinner when loading search results */
.search-spinner-container {
    margin-left: 0.9rem;
}

.search-spinner-position-information {
    position: absolute;
    margin-top: -0.25rem;
}

.search-spinner-position-show-more {
    margin-top: -0.375rem;
}

/* Add styling for the show more button in the search result */
.search-result-show-more {
    display: flex;
    flex-direction: revert;
    flex-wrap: wrap;
}

.search-result-show-more-button {
    margin-right: 0;
}

.search-result-show-more-information {
    order: 3;
    flex: 1 1 100%;
}

.search-result-show-more>*:not(:first-child) {
    margin-top: 0.8rem;
}

@media screen and (min-width: 768px) {
    .search-result-show-more {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .search-result-show-more-button {
        margin-right: 1rem;
    }

    .search-result-show-more-information {
        order: 2;
        flex: revert;
    }

    .search-result-show-more-spinner-container {
        order: 3;
    }

    .search-result-show-more>*:not(:first-child) {
        margin-top: 0.65rem;
    }
}

/* If the search result hit has a collapsible content and the module is next to another module with
   a collapsible content, the margin should be reduced */
.sv-collapsible-content+.sv-se-uu-uit-webb-webapp-search:has(.sv-collapsible-content),
.sv-se-uu-uit-webb-webapp-search:has(.sv-collapsible-content)+.sv-collapsible-content,
.sv-se-uu-uit-webb-webapp-search:has(.sv-collapsible-content)+.sv-se-uu-uit-webb-webapp-search:has(.sv-collapsible-content) {
    margin-top: -1rem;
}