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

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

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


/* Override the standard collapse button style */

:is(.process-vertical, .process-horizontal) .env-collapse-header[aria-expanded]::before {
    background-image: none;
    width: 0;
    height: 0;
    margin: 0;
}

:is(.process-vertical, .process-horizontal) .env-collapse-header[aria-expanded] {
    font-size: 1rem;
    font-weight: 500;
    max-width: 100%;
    min-height: 3em;
    padding-left: 2.25rem;
    text-decoration: none;
    width: 100%;
}

:is(.process-vertical, .process-horizontal) .sv-collapsible-content:last-child {
    margin-bottom: auto;
}

:is(.process-vertical, .process-horizontal) .sv-collapsible-content>* {
    width: 100%;
    margin: 0;
}


/* The expandable text content */

:is(.process-vertical, .process-horizontal) [class*="toggle-section"] {
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0 0 .5em 2.5em;
    margin-top: 0 !important;
    max-width: calc(100% - 2.5em);
    padding: 0 1.25rem;
    width: 100%;
}


/* The steps are always vertical on mobile */

.process-vertical,
.process-horizontal {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    margin-top: 0;
    position: relative;
}

.card .process-vertical,
.card .process-horizontal {
    margin-bottom: 0;
}


/* The line between the steps */

/* Vertical: draw lines between items only, so the line never passes the last sphere */
.process-vertical .sv-collapsible-content {
    position: relative;
}

.process-vertical .sv-collapsible-content:not(:last-child)::after {
    background: var(--color-grey);
    bottom: -2rem;
    content: '';
    left: 1.1rem;
    position: absolute;
    top: 2.175rem;
    width: .1825em;
}

/* Horizontal (mobile): single container line */
.process-horizontal::before {
    content: '';
    width: .1825em;
    height: calc(100% - 2.35rem);
    background: var(--color-grey);
    position: absolute;
    left: 1.1rem;
    top: 1.1rem;
}


/* The toggle button */

.process-horizontal .env-collapse-header,
.process-vertical .env-collapse-header {
    background: transparent;
    border: 0;
    min-height: 3em;
    padding-top: .25em;
    position: relative;
}

.process-vertical .env-collapse-header:hover,
.process-horizontal .env-collapse-header:hover {
    background-color: transparent;
    border-color: transparent;
}


/* The circle before the toggle button */

.process-vertical .env-collapse-header::after,
.process-horizontal .env-collapse-header::after {
    content: '+';
    width: 1.875rem;
    height: 1.875rem;
    background: var(--color-grey);
    border-radius: 50%;
    position: absolute;
    top: .25em;
    left: .25em;
    align-items: center;
    color: var(--color-grey-dark);
    display: flex;
    font-size: 1.25rem;
    justify-content: center;
}

/* Expanded mode */

.process-horizontal .env-collapse-header[aria-expanded="true"],
.process-vertical .env-collapse-header[aria-expanded="true"] {
    background-color: transparent;
    border: none;
}

.process-vertical .env-collapse-header[aria-expanded="true"]::after,
.process-horizontal .env-collapse-header[aria-expanded="true"]::after {
    content: '–';
}


/* On hover */

.process-horizontal .env-collapse-header:hover::after,
.process-vertical .env-collapse-header:hover::after {
    background: #ccc;
}

/* Step with no content: hide the +/- sign and show a non-interactive cursor */

:is(.process-vertical, .process-horizontal) .sv-collapsible-content:has(.sv-text-portlet-content:empty) .env-collapse-header {
    cursor: default;
}

:is(.process-vertical, .process-horizontal) .sv-collapsible-content:has(.sv-text-portlet-content:empty) .env-collapse-header::after,
:is(.process-vertical, .process-horizontal) .sv-collapsible-content:has(.sv-text-portlet-content:empty) .env-collapse-header:hover::after {
    background: var(--color-grey);
    content: '';
}

/* Desktop */

@media screen and (min-width: 992px) {

    .process-vertical .sv-collapsible-content>*,
    .process-horizontal .sv-collapsible-content>* {
        width: 100%;
    }

    /* The horizontal layout on desktop, use three columns if possible, otherwise fill up (1fr) */
    .process-horizontal {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - 2em) / 3), 1fr));
        gap: 1em;
    }

    /* Stretch cards */
    .process-horizontal .sv-collapsible-content {
        display: grid;
        grid-auto-rows: auto 1fr;
    }

    /* The expandable content in the horizontal layout on desktop  */
    .process-horizontal [class*="toggle-section"] {
        margin: .5em 0;
        max-width: 100%;
    }

    .process-horizontal .sv-collapsible-content {
        margin-bottom: 0;
        position: relative;
        width: 100%;
    }

    .process-horizontal .sv-collapsible-content+.sv-collapsible-content {
        margin-top: 0;
    }

    /* The toggle button in the horizontal layout on desktop  */
    .process-horizontal .env-collapse-header[aria-expanded="true"],
    .process-horizontal .env-collapse-header[aria-expanded="false"] {
        justify-content: center;
        min-height: 6em;
        text-align: center;
        width: 100%;
    }

    .process-horizontal .env-collapse-header[aria-expanded="true"],
    .process-horizontal .env-collapse-header[aria-expanded="false"] {
        padding-left: 1rem;
    }

    .process-horizontal .env-collapse-header {
        padding-top: 3em;
    }

    /* Position of the circle in the horizontal layout on desktop */
    .process-horizontal .env-collapse-header[aria-expanded="false"]::after,
    .process-horizontal .env-collapse-header[aria-expanded="true"]::after {
        top: .25em;
        left: auto;
    }

    /* Position of the line between circles in the horizontal layout on desktop */
    .process-horizontal::before {
        display: none;
    }

    .process-horizontal .sv-collapsible-content::before {
        background: var(--color-grey);
        content: '';
        width: calc(100% + 1em);
        height: 0.25em;
        position: absolute;
        top: 1.1875rem;
    }

    /* The line in layout with 3 process steps in one row in main/"Mittenpalt" */

    /* Fade leftmost bars */
    main .process-horizontal .sv-collapsible-content:nth-child(3n+1)::before {
        background: linear-gradient(to right, #e5e5e500 0%, #e5e5e5 50% 100%);
    }

    /* Fade rightmost bars */
    main .process-horizontal .sv-collapsible-content:nth-child(3n+3)::before {
        background: linear-gradient(to right, #e5e5e5 0% 50%, #e5e5e500 100%);
    }

    /* No left side bar on first */
    main .process-horizontal .sv-collapsible-content:first-child:before {
        background: linear-gradient(to right, #e5e5e500 0% 50%, #e5e5e5 50% 100%);
    }

    /* No right side bar on last */
    main .process-horizontal .sv-collapsible-content:last-child:before {
        background: linear-gradient(to right, #e5e5e5 0% 50%, #e5e5e500 50% 100%);
    }

    /* First on row but last item, fade in left but no bar */
    main .process-horizontal .sv-collapsible-content:nth-child(3n+1):last-child:before {
        background: linear-gradient(to right, #e5e5e500 0%, #e5e5e5 50%, #e5e5e500 50% 100%);
    }

    /* Only item */
    main .process-horizontal .sv-collapsible-content:only-child:before {
        display: none;
    }

    /* Do not add extra space for the collapse button in horizontal process steps */
    .process-horizontal a.env-collapse-header::before {
        min-width: 0;
    }
}


/* Make an ordered list look like process */

.has-process-ol ol:not(ol ol) {
    counter-reset: process-step;
    list-style: none;
    margin-top: 1rem;
    margin-left: 0;
    padding-left: 3rem;
    position: relative;
}

/* Lines — drawn between items only, so the line never passes the last sphere */
.has-process-ol ol:not(ol ol)>li:not(:last-child)::after {
    background: var(--color-grey);
    bottom: -1.75rem;
    content: '';
    left: -1.9rem;
    position: absolute;
    top: 1rem;
    width: 0.175rem;
    z-index: 0;
}

.has-process-ol ol:not(ol ol)>li {
    counter-increment: process-step;
    min-height: 2.5rem;
    padding-left: 0.75rem;
    position: relative;
}

.has-process-ol ol:not(ol ol)>li+li {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}


/* Spheres */
.has-process-ol ol:not(ol ol)>li::before {
    align-items: center;
    background: var(--color-grey);
    border-radius: 50%;
    color: var(--color-grey-dark);
    content: counter(process-step);
    display: flex;
    font-size: 1rem;
    font-weight: 500;
    height: 1.875rem;
    justify-content: center;
    left: -2.75rem;
    margin: -0.5rem 0.5rem 0 0;
    min-width: 1.875rem;
    position: absolute;
    top: 0.25rem;
    width: 1.875rem;
}

/* Spacing between text modules and process modules */

.sv-text-portlet+ :is(.process-horizontal, .process-vertical),
.has-process-ol :is(p, h2, h3)+ol,
.sv-text-portlet+.has-process-ol ol:not(ol ol) {
    margin-top: 2.25rem;
}