.rubick {
    .side-menu {
        @media (min-width: 80rem) {
            &.side-menu--collapsed {
                &.side-menu--on-hover {
                    .side-menu__group-label {
                        color:currentColor;
                        &:before {
                            opacity: 0%
                        }
                    }

                    .side-menu__link {
                        .side-menu__link__title {
                            color: currentColor
                        }

                        .side-menu__link__badge,.side-menu__link__chevron {
                            opacity: 1
                        }
                    }

                    div.scrollable {
                        >div {
                            >.side-menu__link {
                                .side-menu__link__icon {
                                    margin-left: 0
                                }
                            }
                        }
                    }
                }

                .side-menu__group-label {
                    position: relative;
                    color: transparent;
                    transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;
                    transition-duration: .1s;
                    &:before {
                        content: "...";
                        position: absolute;
                        text-align: center;
                        left: 0;
                        right: 0;
                        color: var(--color-background);
                        transition-property: opacity;
                        transition-duration: .1s
                    }
                }

                .side-menu__link {
                    .side-menu__link__title {
                        white-space: nowrap;
                        color: transparent;
                        transition-property: color;
                        transition-duration: .3s
                    }

                    .side-menu__link__badge,.side-menu__link__chevron {
                        opacity: 0;
                        transition-property: opacity;
                        transition-duration: .3s
                    }

                    .side-menu__link__icon {
                        transition-property: margin;
                        transition-duration: .1s
                    }
                }

                div.scrollable {
                    >div {
                        >.side-menu__link {
                            .side-menu__link__icon {
                                margin-left: .625rem
                            }
                        }
                    }
                }
            }

            div.scrollable {
                >div {
                    >.side-menu__link {
                        &.side-menu__link--active {
                            margin-bottom: .875rem;
                            margin-right: -1rem;
                            &:before {
                                content: "";
                                inset: 0;
                                position: absolute;
                                background: var(--color-background);
                                @supports (color: color-mix(in lab,red,red)) {
                                    background:color-mix(in oklch,var(--color-background),var(--color-foreground) 2%)
                                }

                                z-index: -1;
                                --radius: 2em;
                                border-block:var(--radius) solid #0000;border-radius: var(--radius) 0 0 var(--radius) / calc(2 * var(--radius));
                                mask: radial-gradient(var(--radius) at 0 var(--radius),#0000 99%,#000 101%) 100% calc(-1 * var(--radius)) / var(--radius) 100% repeat-y,conic-gradient(#000 0 0) padding-box;
                                margin: calc(var(--radius) * -1) 0
                            }

                            &:after {
                                content: "";
                                inset: -1px 1px -1px -1px;
                                position: absolute;
                                background: var(--color-background);
                                @supports (color: color-mix(in lab,red,red)) {
                                    background:color-mix(in oklch,var(--color-background),var(--color-foreground) 2%)
                                }

                                z-index: -2;
                                --radius: 2em;
                                border-block:var(--radius) solid #0000;border-radius: var(--radius) 0 0 var(--radius) / calc(2 * var(--radius));
                                mask: radial-gradient(var(--radius) at 0 var(--radius),#0000 99%,#000 101%) 100% calc(-1 * var(--radius)) / var(--radius) 100% repeat-y,conic-gradient(#000 0 0) padding-box;
                                margin: calc(var(--radius) * -1) 0
                            }

                            >div:before {
                                content:"";
                                top: .5rem;
                                bottom: -.5rem;
                                left: .5rem;
                                right: 1px;
                                opacity: .2;
                                position: absolute;
                                background: var(--color-background);
                                @supports (color: color-mix(in lab,red,red)) {
                                    background:color-mix(in oklch,var(--color-background),var(--color-foreground) 2%)
                                }

                                z-index: -2;
                                --radius: 2em;
                                border-block:var(--radius) solid #0000;border-radius: var(--radius) 0 0 var(--radius) / calc(2 * var(--radius));
                                mask: radial-gradient(var(--radius) at 0 var(--radius),#0000 99%,#000 101%) 100% calc(-1 * var(--radius)) / var(--radius) 100% repeat-y,conic-gradient(#000 0 0) padding-box;
                                margin: calc(var(--radius) * -1) 0
                            }
                        }
                    }
                }
            }
        }

        .side-menu__group-label {
            white-space: nowrap;
            font-size: 0.75rem;
            opacity: 0.5;
            margin-left: 0.5rem;
            margin-top: 1.75rem;
            margin-bottom: 0.75rem;
            text-transform: uppercase;
            display: flex;
            align-items: center; /* centers icon and text vertically */
            gap: 0.5rem; /* optional: adds spacing between icon and text */
;

        }

        .side-menu__link {
            display: flex;
            align-items: center;
            margin-bottom: .375rem;
            padding: 0.3rem 1rem;
            transition-property: all;
            transition-duration: .1s;
            &.side-menu__link--active {
                font-weight: 500;
                .side-menu__link__title {
                    color: var(--color-background)
                }
            }

            .side-menu__link__icon {
                flex: none;
                width: 1.15rem;
                height: 1.15rem;
                --color: var(--color-background);
                @supports (color: color-mix(in lab,red,red)) {
                    --color: color-mix( in oklch, var(--color-background), transparent 30% )
                }
            }

            .side-menu__link__title {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-left: .75rem;
                display: flex;
                align-items: center;
                gap: 0.5rem;
                color: var(--color-background);
                @supports (color: color-mix(in lab,red,red)) {
                    color:color-mix(in oklch,var(--color-background),transparent 20%)
                }
            }

            .side-menu__link__badge {
                min-width: 1.15rem;
                height: 1.2rem;
                padding: 0 .5rem;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: .75rem;
                margin-left: .875rem;
                font-weight: 500;
                color: var(--color-background);
                @supports (color: color-mix(in lab,red,red)) {
                    color:color-mix(in oklch,var(--color-background),transparent 20%)
                }

                background-color: var(--color-background);
                @supports (color: color-mix(in lab,red,red)) {
                    background-color:color-mix(in oklch,var(--color-background),transparent 85%)
                }

                border: 1px solid var(--color-background);
                @supports (color: color-mix(in lab,red,red)) {
                    border:1px solid color-mix(in oklch,var(--color-background),transparent 85%)
                }

                border-radius: .5rem
            }

            .side-menu__link__chevron {
                margin-left: auto;
                stroke-width: 1.2;
                color: var(--color-background);
                @supports (color: color-mix(in lab,red,red)) {
                    color:color-mix(in oklch,var(--color-background),transparent 20%)
                }
            }
        }

        div.scrollable {
            position: relative;
            >div {
                >.side-menu__link {
                    border-radius: 9999px;
                    &.side-menu__link--active {
                        position: relative;
                        color: var(--color-foreground);
                        @media (min-width: 80rem) {
                            .side-menu__link__icon {
                                --color: var(--color-primary)
                            }

                            .side-menu__link__title {
                                color: var(--color-primary)
                            }

                            .side-menu__link__chevron {
                                margin-right: 1rem;
                                color: var(--color-foreground);
                                @supports (color: color-mix(in lab,red,red)) {
                                    color:color-mix(in oklch,var(--color-foreground),transparent 20%)
                                }
                            }

                            .side-menu__link__badge {
                                color: var(--color-primary);
                                @supports (color: color-mix(in lab,red,red)) {
                                    color:color-mix(in oklch,var(--color-primary),transparent 20%)
                                }

                                background-color: var(--color-primary);
                                @supports (color: color-mix(in lab,red,red)) {
                                    background-color:color-mix(in oklch,var(--color-primary),transparent 85%)
                                }

                                border-color: var(--color-primary);
                                @supports (color: color-mix(in lab,red,red)) {
                                    border-color:color-mix(in oklch,var(--color-primary),transparent 85%)
                                }
                            }
                        }
                    }

                    &:hover:not(.side-menu__link--active) {
                        background: var(--color-background);
                        @supports (color: color-mix(in lab,red,red)) {
                            background:color-mix(in oklch,var(--color-background),transparent 92%)
                        }
                    }
                }

                div {
                    padding: .25rem 0;
                    background: var(--color-background);
                    @supports (color: color-mix(in lab,red,red)) {
                        background:color-mix(in oklch,var(--color-background),transparent 90%)
                    }

                    border-radius: 1rem;
                    border: 1px solid var(--color-background);
                    @supports (color: color-mix(in lab,red,red)) {
                        border:1px solid color-mix(in oklch,var(--color-background),transparent 87%)
                    }

                    margin-left: .5rem;
                    margin-right: .5rem;
                    margin-bottom: .5rem;
                    .side-menu__link {
                        margin-bottom: 0
                    }

                    div {
                        margin: 0 -1px
                    }
                }
            }
        }
    }
}

.dark {
    .side-menu {
        .side-menu__group-label {
            opacity: .3
        }

        .side-menu__link {
            &:not(.side-menu__link--active) {
                --color-background: var(--color-foreground);
                @supports (color: color-mix(in lab,red,red)) {
                    --color-background: color-mix( in oklch, var(--color-foreground), transparent 20% )
                }
            }

            &.side-menu__link--active {
                .side-menu__link__icon {
                    --color: var(--color-foreground)
                }

                .side-menu__link__title {
                    color: var(--color-foreground)
                }
            }
        }

        div.scrollable {
            >div {
                >.side-menu__link {
                    &.side-menu__link--active {
                        .side-menu__link__icon {
                            --color: var(--color-foreground)
                        }

                        .side-menu__link__title {
                            color: var(--color-foreground)
                        }

                        .side-menu__link__badge {
                            --color-primary: var(--color-foreground)
                        }

                        &:before {
                            opacity: .7
                        }

                        &:after {
                            opacity: .2;
                            --color-background: var(--color-foreground);
                            @supports (color: color-mix(in lab,red,red)) {
                                --color-background: color-mix( in oklch, var(--color-foreground), transparent 70% )
                            }
                        }

                        >div:before {
                            background:var(--color-foreground);
                            @supports (color: color-mix(in lab,red,red)) {
                                background:color-mix(in oklch,var(--color-foreground),transparent 85%)
                            }
                        }
                    }

                    &:hover:not(.side-menu__link--active) {
                        background: var(--color-foreground);
                        @supports (color: color-mix(in lab,red,red)) {
                            background:color-mix(in oklch,var(--color-foreground),transparent 95%)
                        }
                    }
                }

                div {
                    --color-background: var(--color-foreground);
                    @supports (color: color-mix(in lab,red,red)) {
                        --color-background: color-mix( in oklch, var(--color-foreground), transparent 65% )
                    }
                }
            }
        }
    }
}

/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */