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

    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: bold;
    max-width: 100%;
    min-height: 3em;
    padding-left: 4.1em;
    text-decoration: underline;
    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: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0;
    margin: .5em 0 .5em 2.5em;
    max-width: calc(100% - 2.5em);
    padding: 1.25rem;
    width: 100%;
}


/* The steps are always vertical on mobile */

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

main .process-vertical,
main .process-horizontal {
    margin-top: 0;
}


/* The line between the steps */

.process-vertical::before,
.process-horizontal::before {
    content: '';
    width: .25em;
    height: calc(100% - .5em);
    background: #d4d4d4;
    position: absolute;
    left: calc((2.5em + 0.25em) / 2);
    top: .25em;
}


/* 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: 2.5em;
    height: 2.5em;
    background: #d4d4d4;
    border-radius: 50%;
    position: absolute;
    top: .25em;
    left: .25em;
}


/* 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 {
    background: #999;
}


/* On hover */

.process-horizontal .env-collapse-header[aria-expanded="false"]:hover::after,
.process-vertical .env-collapse-header[aria-expanded="false"]:hover::after {
    background: #999;
}


/* Horizontal layout in full width area should have auto margins, width 100% and
   a max width just like a container has */

.full-width-area .process-horizontal {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

/* Add 15px to the line between the steps due to padding of the process steps */
.full-width-area .process-horizontal::before {
    left: calc(((2.5em + 0.25em) /2) + 15px);
}

@media screen and (min-width: 576px) {
    .full-width-area .process-horizontal {
        max-width: 540px
    }
}

@media screen and (min-width: 768px) {
    .full-width-area .process-horizontal {
        max-width: 720px
    }
}

/* Desktop */

@media screen and (min-width: 992px) {
    .process-vertical .sv-collapsible-content>*,
    .process-horizontal .sv-collapsible-content>* {
        width: 100%;
    }

    /* _The horizontal layout on desktop */
    .process-horizontal {
        display: grid;
        /* Use three columns or fill up (1fr) if fewer */
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - 2em) / 3), 1fr));
        gap: 1em;
        margin: 0;
    }
    /* Stretch cards */
    .process-horizontal .sv-collapsible-content {
        display: grid;
        grid-auto-rows: auto 1fr;
    }
    /* Horizontal layout in full width area "Fullbreddsyta" */
    .full-width-area .process-horizontal {
        /* Use four columns or fill up (1fr) if fewer */
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - 3em) / 4), 1fr));
        max-width: 1140px;
        margin-bottom: 2rem;
        padding-top: 4rem;
        padding-bottom: 3.5rem;
        margin-top: -1em;
        box-shadow: 0 0 0 100vmax var(--color-grey-light);
        clip-path: inset(0 -100vmax);
        background-color: var(--color-grey-light);
    }
    /* 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: #d4d4d4;
        content: '';
        width: calc(100% + 1em);
        height: 0.25em;
        position: absolute;
        top: calc((2.5em + 0.25em) / 2);;
    }
    /* Darker in full width area */
    .process-horizontal .sv-collapsible-content:last-child {
        margin-bottom: 0px;
    }
    .full-width-area .process-horizontal .sv-collapsible-content::before,
    .full-width-area .process-horizontal .env-collapse-header::after {
        background: #999999;
    }
    .full-width-area .process-horizontal .env-collapse-header[aria-expanded="true"]::after,
    .full-width-area .process-horizontal .env-collapse-header[aria-expanded="false"]:hover::after {
        background: #555555;
    }


    /* Add fades to "connect" over line breaks */

    /* The line in layout with 4 process steps in one row in "Fullbreddsyta" */

    /* Fade leftmost bars */
    .full-width-area .sv-collapsible-content:nth-child(4n+1)::before {
        background: linear-gradient(to right, #99999900 0%, #999999 50% 100%);
    }
    /* Fade rightmost bars */
    .full-width-area .sv-collapsible-content:nth-child(4n+4)::before {
        background: linear-gradient(to right, #999999 0% 50%, #99999900 100%);
    }
    /* No left side bar on first */
    .full-width-area .sv-collapsible-content:first-child::before {
        background: linear-gradient(to right, #99999900 0% 50%, #999999 50% 100%);
    }
    /* No right side bar on last */
    .full-width-area .sv-collapsible-content:last-child::before {
        background: linear-gradient(to right, #999999 0% 50%, #99999900 50% 100%);
    }
    /* First on row but last item, fade in left but no bar */
    .full-width-area .sv-collapsible-content:nth-child(4n+1):last-child:before {
        background: linear-gradient(to right, #99999900 0%, #999999 50%, #99999900 50% 100%);
    }
    /* Only item */
    .full-width-area .sv-collapsible-content:only-child::before {
        display: none;
    }

    /* 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, #d4d4d400 0%, #d4d4d4 50% 100%);
    }
    /* Fade rightmost bars */
    main .process-horizontal .sv-collapsible-content:nth-child(3n+3)::before {
        background: linear-gradient(to right, #d4d4d4 0% 50%, #d4d4d400 100%);
    }
    /* No left side bar on first */
    main .process-horizontal .sv-collapsible-content:first-child:before {
        background: linear-gradient(to right, #d4d4d400 0% 50%, #d4d4d4 50% 100%);
    }
    /* No right side bar on last */
    main .process-horizontal .sv-collapsible-content:last-child:before {
        background: linear-gradient(to right, #d4d4d4 0% 50%, #d4d4d400 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, #d4d4d400 0%, #d4d4d4 50%, #d4d4d400 50% 100%);
    }
    /* Only item */
    main .process-horizontal .sv-collapsible-content:only-child:before {
        display: none;
    }

    /* Remove space above when directly after hero module (due to jumbotron class margin-bottom:2rem) */
    .sv-se-uu-module-webb-hero-module + .process-horizontal {
        margin-top: -2rem;
    }
}

/* Make an ordered list look like process*/
/* Lines */
.has-process-ol ol::before{
    background: #d4d4d4;
    content: '';
    height: calc(100% - 1rem);
    left: calc(1.25rem - 2px);
    position: absolute;
    top: 1.25rem;
    width: 0.25rem;
    z-index: 0;
}

/* Spheres */
.has-process-ol ol li::before {
    background: #d4d4d4;
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 2.5rem;
    left: -3rem;
    margin: -0.5rem 0.5rem 0 0;
    min-width: 2.5em;
    position: absolute;
    width: 2.5rem;
}

.has-process-ol ol {
    list-style: none;
    margin-top: 1rem;
    margin-left: 0.25rem;
    padding-left: 3rem;
    position: relative;
}

.has-process-ol ol li {
    position: relative;
}

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