@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;
@use "../mixins/component-mixins/nav-mixins" as nav-mixins;

$sidemenu-border-left-thickness: func.units(2);
$sidemenu-link-padding-right: func.units(4);
$sidemenu-icon-size: 2.4rem;

ul.sidemenu,
ol.sidemenu {
    border-bottom: 1px solid func.color(vars.$sidenav-border-top-bottom-color);
    border-top: 1px solid func.color(vars.$sidenav-border-top-bottom-color);
    max-width: none;
    @include mixins.unstyled-list;
    @include nav-mixins.nav-link-leftdist($sidemenu-border-left-thickness, vars.$sidenav-border-active-color, 16px, 40px, 64px, 88px);
    @include nav-mixins.nav-link-border(vars.$sidenav-link-border-color, vars.$sidenav-sublink-border-color);

    ul,
    ol {
        width: 100%;
        max-width: none !important; // Override ul styling in typography.scss
        @include mixins.unstyled-list;
    }

    li {
        background-color: func.color(vars.$sidenav-link-background-color);
        font-size: func.font-size('sm');
    }

    :is(ul, ol) li,
    :is(ul, ol) :is(ul, ol) li {
        font-size: func.font-size('xs');
    }

    .nav-link, 
    .nav-step {
        padding-top: func.units(2);
        padding-bottom: func.units(2);
        padding-right: func.units(4); // padding-left handled by mixin 'nav-link-leftdist'
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        text-align: start;
        width: 100%;
        max-width: none;
        border: none;
        color: func.color(vars.$sidenav-link-font-color);
        background-color: func.color('transparent');
        text-decoration: none;
        min-height: calc(func.units(7) - 1px); // Minus 1px due to the border on the li element
        cursor: pointer;
        font-weight: func.font-weight("normal");
        line-height: func.units(5, 'rem');

        &:focus {
            outline-offset: 0;
            position: relative;
            z-index: vars.$zindex-focus;
        }

        &:hover {
            background-color: func.color(vars.$sidenav-link-background-color-hover);

            .sidenav-information {
                color: func.color(vars.$sidenav-link-current-extra-information-text-color);
            }
        }

        .sidenav-information {
            color: func.color(vars.$sidenav-link-default-extra-information-text-color);
            margin: 0;
            display: block;
            width: 100%;
            font-weight: func.font-weight("normal");
        }
    }

    .nav-link {
        div {
            width: 100%;
        }

        span {
            display: inline-block;
            width: 100%;
            overflow-wrap: break-word;
        }
    }

    .nav-step {
        & > div {
            display: flex;
            width: 100%;
        }

        div div {
            overflow-wrap: break-word;
            max-width: calc(100% - $sidemenu-link-padding-right);
            width: 100%;
        }

        .sidenav-number {
            margin-right: func.units(2);
        }

        .sidenav-maininfo {
            display: inline-flex;
            width: 100%;
            justify-content: space-between;

            .sidenav-title {
                display: inline-block;
                max-width: calc(100% - $sidemenu-icon-size);
                overflow-wrap: break-word;
                text-decoration: underline;
            }

            .sidenav-icon {
                margin-left: auto;
                width: $sidemenu-icon-size;
                height: $sidemenu-icon-size;
    
                .icon-svg {
                    vertical-align: baseline;
                }
            }
        }

        .sidenav-information {
            max-width: calc(100% - $sidemenu-icon-size);
        }
    }

    li.active {

        & > :first-child {
            font-weight: func.font-weight("bold");
        }
    }

    li.current {
        background-color: func.color(vars.$sidenav-link-current-background-color);

        & > .nav-link,
        & > .nav-step {
            font-weight: func.font-weight("bold");

            .sidenav-information {
                color: func.color(vars.$sidenav-link-current-extra-information-text-color);
            }
        }
    }

    li.sidenav-error {
        background-color: func.color(vars.$sidenav-error-background-color);

        &.current {
            background-color: func.color(vars.$sidenav-error-background-color);
        }

        .nav-link:hover,
        .nav-step:hover {
            background-color: func.color(vars.$sidenav-error-background-color);
        }

        .sidenav-information {
            color: func.color(vars.$sidenav-link-current-extra-information-text-color);
        }
    }

    li.disabled {
        cursor: not-allowed;

        .nav-link,
        .nav-step {
            cursor: not-allowed;

            .sidenav-title {
                text-decoration: none;
            }

            &:hover {
                background-color: func.color('transparent');
                cursor: not-allowed;
            }
        }

        &.current {
            background-color: func.color('transparent');
        }

        &.sidenav-error {
            background-color: func.color(vars.$sidenav-error-background-color);
        }
    }
}