@use 'mixins' as *;

.sidebar-wrapper {
    width: 100dvw;
    overflow-y: auto;
    height: 100dvh;

    .sidebar-backdrop {
        background-color: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(2px);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity 0.25s ease-in;
        z-index: 50;
        display: none;
        opacity: 0;
        pointer-events: none;
    }

    .sidebar-menu {
        position: fixed;
        display: flex;
        flex-flow: column;
        left: 0;
        top: 0;
        height: 100%;
        width: var(--sidebar-width);
        overflow: auto;
        background: hsl(var(--sidebar-background));
        border-right-width: 1px;
        transition: transform 0.3s var(--ease);
        padding: calc(var(--spacing) * 2);
        gap: 0.25rem;
        color: hsl(var(--sidebar-foreground));
        z-index: 51;
        transform: translateX(-100%);

        .menu-content {
            display: flex;
            flex-flow: column;
            gap: 0.25rem;
            flex: 1;
            overflow: auto;
            width: 100%;
        }

        .group-label {
            font-size: 0.75rem;
            line-height: calc(1 / 0.75);
            padding-top: .5rem;
            padding-left: 1rem;
            padding-right: 1rem;
            margin-top: 20px;
            font-weight: 500;
            color: hsl(var(--sidebar-ring));

            &:first-child {
                margin-top: 0;
            }
        }

        .menu-header,
        .menu-footer {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing) * 2);
            width: 100%;
            padding-top: .5rem;
            padding-bottom: .5rem;
            padding-left: 1rem;
            padding-right: 1rem;
            border-radius: calc(var(--radius) - 2px);
            @include transitionColors();
            text-decoration: none;
            font-weight: 500;

            &:hover {
                background-color: hsl(var(--sidebar-accent));
                color: hsl(var(--sidebar-accent-foreground));
            }
        }
    }

    .sidebar-content {
        margin-left: 0;
        transition: margin 0.3s var(--ease);

        .sidebar-header {
            position: sticky;
            width: 100%;
            top: 0;
            border-bottom-width: 1px;
            padding: 0.75rem;
            background-color: hsl(var(--background));
        }
    }

    &.show {
        .sidebar-menu {
            transform: translateX(0);
        }

        .sidebar-content {
            margin-left: var(--sidebar-width);
        }

        .sidebar-backdrop {
            opacity: 1;
            pointer-events: all;
        }
    }

    &.sidebar-right {
        .sidebar-menu {
            left: auto;
            right: 0;
            border-right-width: 0;
            border-left-width: 1px;
            transform: translateX(100%);
        }

        .sidebar-content {
            margin-left: 0;
            margin-right: 0;
        }

        &.show {
            .sidebar-menu {
                transform: translateX(0);
            }

            .sidebar-content {
                margin-right: var(--sidebar-width);
            }
        }
    }

    @media (max-width: 767px) {
        .sidebar-backdrop {
            display: block;
        }

        .sidebar-content {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
}