body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 16px;
}

section.sidebar {
    width: 320px;
    background-color: #f8f9fa;
    border-left: 1px solid #cdcdcd;
    border-right: 1px solid #cdcdcd;
}

// ----------------------------------------------------------------------------------

$text-color: #1f1f1f;
$border-color: #cdcdcd;
$subnav-indent: 10px;
$icon-width: 50px;
$level-one-indent: $icon-width;
$border-img: url("../img/border.png");
$dot-img: url("../img/dot.png");

nav.main {
    li {
        border-bottom: 1px solid $border-color;
        &:first-of-type {
            border-top: 1px solid $border-color;
        }
    }

    li > a {
        display: block;
        padding: 15px 0;
        text-decoration: none;
        color: $text-color;
        &:hover {
            background-color: rgba($text-color, 0.03);
        }
    }

    // level 0: main items
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        > li {
            a.icon {
                position: relative;
                padding-left: $icon-width;

                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: $icon-width;
                    height: 100%;
                    background-position: center center;
                    background-size: 22px 22px;
                    background-repeat: no-repeat;
                }

                &.icon-dashboard::before {
                    background-image: url("/img/menu-icons/dashboard.svg");
                }
                &.icon-machines::before {
                    background-image: url("/img/menu-icons/machines.svg");
                }
                &.icon-events::before {
                    background-image: url("/img/menu-icons/events.svg");
                }
                &.icon-reports::before {
                    background-image: url("/img/menu-icons/reports.svg");
                }
                &.icon-call-center::before {
                    background-image: url("/img/menu-icons/call-center.svg");
                }
                &.icon-warehouse-management::before {
                    background-image: url("/img/menu-icons/dashboard.svg");
                }
            }
        }
    }

    // subnav level 1
    ul.subnav {
        border-top: 1px solid $border-color;
        // reset parent borders
        li {
            border-bottom: none;
            &:first-of-type {
                border-top: none;
            }
        }

        > li {
            // default: just border line
            background-image: $border-img;
            background-repeat: repeat-y;
            background-position: $level-one-indent / 2 center;

            a {
                padding-left: $level-one-indent;
            }

            // subnav level 2
            > ul {
                > li {
                    background-image: $border-img;
                    background-repeat: repeat-y;
                    background-position: $subnav-indent * 5 center;
                    a {
                        color: blue;
                        padding-left: $subnav-indent * 7;
                    }
                    &:first-child a {
                        // reset parent properties
                        border: none;
                    }
                    // subnav level 3
                    > ul {
                        > li {
                            background-image: $border-img;
                            background-repeat: repeat-y;
                            background-position: $subnav-indent * 7 center;
                            a {
                                color: red;
                                padding-left: $subnav-indent * 9;
                            }
                            // subnav level 4
                            > ul {
                                > li {
                                    background-image: $border-img;
                                    background-repeat: repeat-y;
                                    background-position: $subnav-indent * 9 center;
                                    a {
                                        color: green;
                                        padding-left: $subnav-indent * 11;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}