#layout-menu.layout-menu {
    --loco-orange: #ff5a2c;
    --loco-orange-deep: #e84518;
    --loco-menu-text: #484354;
    --loco-menu-muted: #7f798a;
    --loco-sidebar-bg: #f1f3f6;
    --bs-menu-bg: var(--loco-sidebar-bg);
    --bs-menu-bg-rgb: 241, 243, 246;
    background-color: var(--loco-sidebar-bg);
    border-inline-end: 1px solid #dfe2e8;
    box-shadow: 0.3rem 0 1.4rem rgba(47, 43, 61, 0.075);
}

#layout-menu .app-brand {
    background-color: #f9fafb;
    border-block-end: 1px solid #dfe2e8;
}

#layout-menu .menu-inner {
    padding-block: 0.55rem 1.25rem !important;
}

#layout-menu .menu-inner > .menu-item {
    --menu-accent: #687184;
    --menu-accent-soft: #e7eaf0;
}

#layout-menu .menu-inner > .menu-item.menu-tone-orange {
    --menu-accent: #f4511e;
    --menu-accent-soft: #fff0ea;
}

#layout-menu .menu-inner > .menu-item.menu-tone-blue {
    --menu-accent: #3478c2;
    --menu-accent-soft: #eef6ff;
}

#layout-menu .menu-inner > .menu-item.menu-tone-cyan {
    --menu-accent: #0c93a7;
    --menu-accent-soft: #ebf9fb;
}

#layout-menu .menu-inner > .menu-item.menu-tone-amber {
    --menu-accent: #b97800;
    --menu-accent-soft: #fff7e5;
}

#layout-menu .menu-inner > .menu-item.menu-tone-emerald {
    --menu-accent: #168a5b;
    --menu-accent-soft: #ecf8f2;
}

#layout-menu .menu-inner > .menu-item.menu-tone-violet {
    --menu-accent: #7658b7;
    --menu-accent-soft: #f4f0fc;
}

#layout-menu .menu-inner > .menu-item.menu-tone-indigo {
    --menu-accent: #5263c7;
    --menu-accent-soft: #f0f2ff;
}

#layout-menu .menu-inner > .menu-item.menu-tone-slate {
    --menu-accent: #687184;
    --menu-accent-soft: #e7eaf0;
}

#layout-menu .menu-header {
    padding-block: 1.2rem 0.35rem;
}

#layout-menu .menu-header .menu-header-text {
    color: var(--loco-menu-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

#layout-menu .menu-inner > .menu-item > .menu-link {
    border: 1px solid transparent;
    color: var(--loco-menu-text);
    font-weight: 500;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

#layout-menu .menu-inner > .menu-item > .menu-link .menu-icon {
    color: var(--menu-accent);
    transition: color 0.18s ease;
}

#layout-menu .menu-item:not(.active):not(.open) > .menu-link:hover,
#layout-menu .menu-item:not(.active):not(.open) > .menu-link:focus {
    border-color: color-mix(in srgb, var(--menu-accent) 14%, transparent);
    background-color: var(--menu-accent-soft);
    color: var(--menu-accent);
}

#layout-menu .menu-inner > .menu-item.open > .menu-link.menu-toggle,
#layout-menu .menu-inner > .menu-item.active > .menu-link.menu-toggle {
    border-color: color-mix(in srgb, var(--menu-accent) 16%, transparent);
    background-color: var(--menu-accent-soft);
    color: var(--menu-accent);
    font-weight: 600;
}

#layout-menu .menu-inner > .menu-item.open > .menu-link.menu-toggle::after,
#layout-menu .menu-inner > .menu-item.active > .menu-link.menu-toggle::after {
    background-color: var(--menu-accent);
}

#layout-menu .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle) {
    border-color: transparent;
    background: linear-gradient(135deg, var(--loco-orange-deep), #ff7247);
    box-shadow: 0 0.25rem 0.75rem rgba(244, 81, 30, 0.22);
    color: #fff;
    font-weight: 600;
}

#layout-menu .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
    color: #fff;
}

#layout-menu .menu-sub {
    padding-block: 0.2rem 0.35rem;
}

#layout-menu .menu-sub > .menu-item > .menu-link {
    min-block-size: 2.25rem;
    color: #686274;
    font-size: 0.875rem;
}

#layout-menu .menu-sub > .menu-item > .menu-link::before {
    background-color: color-mix(in srgb, var(--menu-accent) 45%, #fff);
}

#layout-menu .menu-sub > .menu-item > .menu-link:hover,
#layout-menu .menu-sub > .menu-item > .menu-link:focus {
    background-color: var(--menu-accent-soft);
    color: var(--menu-accent);
}

#layout-menu .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle) {
    background: var(--menu-accent-soft);
    box-shadow: none;
    color: var(--menu-accent);
    font-weight: 600;
}

#layout-menu .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before {
    background-color: var(--menu-accent);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--menu-accent) 14%, transparent);
}

#layout-menu .menu-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--menu-accent) 45%, transparent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #layout-menu .menu-link,
    #layout-menu .menu-icon {
        transition: none;
    }
}