$link-padding: spacer(1) spacer(2);
$nav-item-min-height: 56px;

.oui-manager-side-nav {
    background: #fff;
    min-width: 285px;
    max-width: 285px;
    overflow: hidden;
    border-right: 1px solid var(--grey-50);
    height: 100%;

    .sidenav {
        &__header {
            flex: none;
            min-width: 0;
            min-height: 0;
            padding: spacer(2) spacer(2) 0;
            background: map-fetch($brand-color, paper);
            position: relative;

            &__title {
                margin-bottom: spacer(0.5);
                line-height: 1.3;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            &__item {
                line-height: 1;
                margin-bottom: spacer(1);
            }

            &--full-height {
                display: flex;
                flex-direction: column;
                flex: 1;
            }

            .sidenav__details {
                &__title {
                    h5 {
                        font-size: 13px;
                    }
                }
            }
        }

        &__body {
            flex: 1;
            min-width: 0;
            min-height: 0;
            overflow-y: auto;
            padding: spacer(2);
            background: map-fetch($brand-color, paper);

            .icon-status--active {
                vertical-align: middle;

                &:before {
                    background: map-fetch($color, background, good-news);
                    position: relative;
                    left: -2px;
                }
            }

            &--empty {
                margin-top: spacer(4);
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        &__empty-message {
            svg {
                display: block;
                width: 40px;
                height: 40px;
                fill: map-fetch($color, text, muted);
                margin: 0 auto spacer(1);
            }
        }

        &__footer {
            flex: none;
            min-width: 0;
            min-height: 0;
            background: map-fetch($color, background, faint);
            padding: spacer(1) spacer(2);
            border-top: 1px solid #dddddd;
        }

        &__section {
            margin-bottom: spacer(2);

            &:last-child {
                margin-bottom: 0;
            }

            &__title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: spacer(0.5);

                h5 {
                    font-size: 13px;
                }
            }
        }

        &__change-list {
            margin-left: spacer(1);
            margin-bottom: 0;
            font-size: 12px;

            > li {
                position: relative;

                &:before {
                    content: "";
                    position: absolute;
                    left: spacer(-1);
                    top: 6px;
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                }
            }

            &--draft:before {
                background: map-fetch($color, ui, draft);
            }

            &--live:before {
                background: map-fetch($color, ui, live);
            }
        }

        &__popover {
            z-index: map-fetch($z-index, poptip);
        }
    }

    .nav-list {
        margin-left: spacer(-2);
        margin-right: spacer(-2);
        border-top: 1px solid map-fetch($border, color, base);

        &--changes {
            .icon-status--active {
                position: absolute;
                top: 50%;
                margin-top: -10px;
                right: spacer(3.5);
            }
        }

        > li {
            position: relative;
            border: 1px solid transparent;
            border-bottom: 1px solid var(--grey-50);
            min-height: $nav-item-min-height;
            margin-top: -1px;

            &.nav-list__link {
                display: flex;
                align-items: center;
                width: 100%;

                .link {
                    padding: $link-padding;
                }

                &:hover {
                    transition: background map-fetch($transition-duration, base);
                    background: var(--highlight);
                    cursor: pointer;
                    border-top: 1px solid var(--grey-50);
                    color: var(--light-blue-75);
                }

                &--disabled {
                    opacity: map-fetch($opacity, medium);
                }

                &--disabled:after {
                    display: none;
                }

                &--disabled:hover {
                    background: inherit;
                    cursor: default;
                    border: 1px solid transparent;
                    border-bottom: 1px solid map-fetch($border, color, base);
                    box-shadow: none;
                }

                &.is-active {
                    background: map-fetch($root-color, highlight);
                    border-top: 1px solid var(--grey-50);
                    color: var(--light-blue-75);
                }

                &--nested {
                    padding-right: spacer(4);

                    &:after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        right: spacer(2);
                        margin-top: -4px; // Fixes vertical alignment.
                    }
                }

                &--change-dependency:before {
                    display: block;
                    content: "then";
                    position: absolute;
                    z-index: 2;
                    top: spacer(-1);
                    right: spacer(0.5);
                    background: white;
                    color: map-fetch($color, text, muted);
                    padding: 0 spacer(0.5);
                    border-radius: map-fetch($badge, border-radius);
                    font-size: map-fetch($font, size, micro);
                    pointer-events: none;
                }
            }
        }
    }

    .nav-list__link__close {
        position: absolute;
        top: spacer(1);
        right: spacer(1.5);
        cursor: pointer;
        color: #dddddd;

        &:hover {
            .lego-icon {
                color: #555;
            }
        }
    }

    .nav-list-group {
        margin-bottom: spacer(2);
    }

    .nav-link {
        padding: 5px spacer(1);
        margin-left: spacer(-1);
        border-radius: 999px;
        &:hover {
            background-color: var(--highlight);
        }

        &--back:before {
            @extend .oui-arrow-inline--left;
            margin-right: spacer(0.5); // Fixes spacing of arrow.
            content: "";
        }
    }

    .nav-list__link {
        .oui-manager-side-nav__custom-link {
            @extend .link;
            width: 100%;
            height: 100%;
            min-height: calc(#{$nav-item-min-height} - 2px);
            display: flex;
            align-items: center;

            &--active {
                background: map-fetch($root-color, highlight);
                color: var(--light-blue-75);
            }
        }
    }
}