.siderbar-categories {
    --offset: 1rem;
    height: calc(100% - var(--offset));
    margin: auto 0 auto calc(var(--offset) / 2);
    border-radius: 1rem;
    overflow: hidden;
}

    .siderbar-categories .offcanvas-header {
        border-bottom: 1px solid hsl(0 0% 96.1%);
    }

    .siderbar-categories .offcanvas-header .btn-link{
        color:inherit;
        text-decoration: none;
        margin: 0;
    }

        .siderbar-categories .offcanvas-header .btn-close {
            margin: 0;
        }

    .sidebar-categories-menu {
        padding: 0.5rem;
    }

.sidebar-categories-menu .list-group-item {
    padding: 0;
}

.sidebar-categories-menu .list-group-item {
    padding: 0 !important;
    margin: 0 !important;
}

    .sidebar-categories-menu .btn-link {
        text-decoration: none;
        background: hsla(0 0% 98% / 0);
        color: hsla(0 0% 9% / 0.5);
        white-space: nowrap;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        border-radius: 0.75rem;
    }

    .sidebar-categories-menu .btn-link:hover {
        background: hsla(199 88.7% 48.4% / 1);
        color: hsla(0 0% 100% / 1);
    }

        .sidebar-categories-menu .btn-link .sidebar-item-counter {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.835rem;
            width: 2rem;
            padding: 0.15rem;
            background-color: var(--primary-color);
            color: #fff;
            border-radius: 0.35rem;
        }

        .sidebar-categories-menu .btn-link:hover .sidebar-item-counter {
            background-color: #fff;
            color: var(--primary-color);
        }


.sidebar-item-icon {
    position: relative;
    width: 28px;
    font-size: 1.25rem;
}

.siderbar-categories .list-group-item .siderbar-item-arrow {
    opacity: 0;
    transform: translateX(-1rem);
    transition: all 150ms linear;
}

.siderbar-categories .list-group-item:hover .siderbar-item-arrow {
    opacity: 1;
    transform: translateX(0);
}



@media screen and (max-width:761px) {
    .siderbar-categories {
        width: 100vw;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
    }
}