body {
    // custom
    --active-file-bullet-size: 6px;
}

.nav-files-container {
    .highlighted-folder {
        background-color: transparent;
        border-radius: unset;
        margin: unset;
        padding: unset;
        box-shadow: unset;
    }

    .highlighted-folder > .nav-folder-title {
        background-color: unset;
        border-radius: var(--radius-s);
        margin-bottom: var(--size-2-1);
        color: var(--nav-item-color);
        font-weight: var(--nav-item-weight);
    }

    .highlighted-parent-folder {
        background-color: transparent;
        border-radius: 0;
        padding: 0;
        margin: 0;
    }

    .highlighted-parent-folder > .nav-folder-title {
        border-radius: var(--radius-s);
        margin-bottom: var(--size-2-1);
        color: var(--nav-item-color);
        font-weight: var(--nav-item-weight);
    }

    .highlighted-folder > .nav-folder-title.is-being-dragged,
    .highlighted-parent-folder > .nav-folder-title.is-being-dragged {
        color: var(--nav-item-color-hover);
    }

    .highlighted-folder .nav-file-title,
    .highlighted-parent-folder .nav-file-title {
        color: inherit;
    }

    .highlighted-folder .nav-file-title.is-active {
        font-weight: var(--nav-item-weight);
        color: inherit;
    }
    .highlighted-parent-folder .nav-file-title.is-active {
        font-weight: var(--nav-item-weight);
        color: inherit;
    }

    .highlighted-folder .nav-file-title.is-being-dragged,
    .highlighted-parent-folder .nav-file-title.is-being-dragged {
        color: inherit;
    }

    .input-width-150 {
        width: 150px;
    }

    .margin-left-10 {
        margin-left: 0px;
    }

    .highlighted-intermediate-folder > .nav-folder-title::after,
    .highlighted-folder > .nav-folder-title::after,
    .highlighted-parent-folder > .nav-folder-title::after {
        content: "";
        position: absolute;
        left: calc(-4px - var(--active-file-bullet-size, 6px));
        top: calc(50% - var(--active-file-bullet-size, 6px) * 0.5);
        width: var(--active-file-bullet-size, 6px);
        height: var(--active-file-bullet-size, 6px);
        border-radius: 50%;
        background-color: currentColor;
    }

    .highlighted-folder .nav-file-title.is-active::after {
        content: "";
        position: absolute;
        left: calc(-4px - var(--active-file-bullet-size, 6px));
        top: calc(50% - var(--active-file-bullet-size, 6px) * 0.5);
        width: var(--active-file-bullet-size, 6px);
        height: var(--active-file-bullet-size, 6px);
        border-radius: 50%;
        background-color: currentColor;
    }
}

@media (hover: hover) {
    .nav-files-container {
        .highlighted-folder > .nav-folder-title:hover,
        .highlighted-parent-folder > .nav-folder-title:hover {
            color: var(--nav-item-color-hover);
        }

        .highlighted-folder .nav-file-title:hover,
        .highlighted-parent-folder .nav-file-title:hover {
            color: inherit;
        }
    }
}
