html[data-theme="light"] {
    --userjourney_border_color: white;
    --userjourney_section_bg_color_active: var(--sd-color-primary-highlight);
    --userjourney_section_bg_color: var(--sd-color-primary);
    --userjourney_section_txt_color_active: white;
    --userjourney_section_txt_color: white;
    --userjourney_step_bg_color_active: var(--sd-color-info-highlight);
    --userjourney_step_bg_color: var(--sd-color-muted);
    --userjourney_step_txt_color_active: white;
    --userjourney_step_txt_color: white;
    --userjourney_subsection_bg_color_active: var(--sd-color-secondary-highlight);
    --userjourney_subsection_bg_color: var(--sd-color-secondary);
    --userjourney_subsection_txt_color_active: white;
    --userjourney_subsection_txt_color: white;
}

html[data-theme="dark"] {
    --userjourney_border_color: black;
    --userjourney_section_bg_color_active: var(--sd-color-primary-highlight);
    --userjourney_section_bg_color: var(--sd-color-primary);
    --userjourney_section_txt_color_active: white;
    --userjourney_section_txt_color: white;
    --userjourney_step_bg_color_active: var(--sd-color-info-highlight);
    --userjourney_step_bg_color: var(--sd-color-muted);
    --userjourney_step_txt_color_active: black;
    --userjourney_step_txt_color: black;
    --userjourney_subsection_bg_color_active: var(--sd-color-secondary-highlight);
    --userjourney_subsection_bg_color: var(--sd-color-secondary);
    --userjourney_subsection_txt_color_active: white;
    --userjourney_subsection_txt_color: white;

    .pre-userjourney-subsection {
        background-color: transparent !important;
        filter: invert(1) !important;
    }

    .pre-userjourney-step {
        background-color: transparent !important;
        filter: invert(1) !important;
    }
}

.before-userjourney {
    margin-bottom: 10px;
}

.userjourney {
    width: 100%;
    list-style: none;
    overflow: hidden;
    height: 40px;
    max-height: 40px;
    max-width: 85%;
    display: inline-flex;
    white-space: nowrap;
    padding-bottom: 0px;
    padding-top: 0px;
    mask-image: linear-gradient(90deg, #000 90%, transparent);
}

p::after, .userjourney {
    margin-top: -5px;
    margin-bottom: -10px;
}

.userjourney li {
    float: left;
}

.userjourney li span {
    /* color: white; */
    margin-left: -10px;
    padding-left: 50px;
    padding-right: 50px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-left-color: var(--userjourney_border_color);
    border-left-style: solid;
    border-left-width: 2px;
}

.pre-userjourney-subsection {
    content:url('_images/userjourney-sub.png');
    width: 20px;
    height: 20px;
    margin-top: 2px;
    margin-right: 10px;
}

.pre-userjourney-step {
    content:url('_images/userjourney-step.png');
    margin-left: 20px;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    margin-right: 10px;
}

.userjourney-level-top {
    background: var(--userjourney_section_bg_color);
    color: var(--userjourney_section_txt_color);
    z-index: 1;
}

.userjourney-level-top-active {
    background: var(--userjourney_section_bg_color_active);
    color: var(--userjourney_section_txt_color_active);
    z-index: 1;
}

.userjourney-level-sub {
    background: var(--userjourney_subsection_bg_color);
    color: var(--userjourney_subsection_txt_color);
    z-index: 2;
}

.userjourney-level-sub-active {
    background: var(--userjourney_subsection_bg_color_active);
    color: var(--userjourney_subsection_txt_color_active);
    z-index: 2;
}

.userjourney-level-step {
    background: var(--userjourney_step_bg_color);
    color: var(--userjourney_step_txt_color);
    z-index: 3;
}

.userjourney-level-step-active {
    background: var(--userjourney_step_bg_color_active);
    color: var(--userjourney_step_txt_color_active);
    z-index: 3;
}