@layer components {
    .sidebar {
        @apply fixed top-0 left-0 z-40 h-screen w-64 bg-slate-200 transition;

        &.closed {
            @apply -translate-x-[208px];
        }

        & .scales-logo {
            @apply bg-[#0C2136];
        }
    }

    .sidebar.closed .chevron-wrapper svg {
        @apply rotate-180;
    }

    .sidebar-menu {
        @apply space-y-2 font-medium p-2;
    }

    .sidebar-menu .sidebar-menu-item {
        @apply flex items-center p-2 text-gray-900 rounded-lg transition;

        &:hover {
            @apply bg-gray-100;
        }

        &.active {
            @apply bg-primary text-white;
        }

        /* Closed state: justify content to end so icon appears in visible strip */
        &.sidebar-menu-item-closed {
            @apply justify-end;
        }
    }

    /* Icon containers */
    .sidebar-menu-icon-left,
    .sidebar-menu-icon-right {
        @apply flex items-center justify-center transition;
    }

    /* Title styling */
    .sidebar-menu-title {
        @apply transition;
    }

    /* Main content wrapper - applies to the main element */
    .main-content.has-sidebar {
        /* w-64 = 16rem = 256px */
        @apply transition ml-64;

        &.sidebar-closed {
            @apply ml-12; /* 48px = 3rem */
        }
    }

    /* Mobile: sidebar starts hidden, main content has no margin */
    @media (max-width: 639px) {
        .sidebar {
            @apply -translate-x-full;

            &:not(.closed) {
                @apply translate-x-0;
            }
        }

        .main-content {
            @apply ml-0;

            &.sidebar-closed {
                @apply ml-0;
            }
        }
    }

    /* Respect user's motion preferences */
    @media (prefers-reduced-motion: reduce) {
        .sidebar,
        .main-content,
        .sidebar .chevron-wrapper,
        .sidebar .chevron-wrapper svg,
        .sidebar-menu .sidebar-menu-item {
            transition: none;
        }
    }
}