/*
 * Offerist sidebar navigation v2
 * One stable geometry for default, hover, press, pending and active states.
 */
.sidebar .menu__item {
    position: relative;
}

.sidebar .menu__link {
    --sidebar-nav-hover: rgba(255, 255, 255, .065);
    --sidebar-nav-pressed: rgba(255, 255, 255, .105);
    --sidebar-nav-active-a: rgba(91, 96, 255, .22);
    --sidebar-nav-active-b: rgba(20, 184, 166, .17);
    position: relative !important;
    isolation: isolate;
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    margin: 3px 12px !important;
    padding: 13px 16px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, .92) !important;
    text-decoration: none !important;
    outline: none !important;
    overflow: hidden !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    transform-origin: center;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    transition:
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .12s cubic-bezier(.2, .8, .2, 1) !important;
}

.sidebar .menu__link::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--sidebar-nav-hover);
    opacity: 0;
    transform: scale(.985);
    transition:
        opacity .18s ease,
        transform .18s cubic-bezier(.2, .8, .2, 1),
        background .18s ease;
    pointer-events: none;
}

.sidebar .menu__link::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 3px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, #7dd3fc 0%, #5eead4 100%);
    box-shadow: 0 0 14px rgba(94, 234, 212, .42);
    opacity: 0;
    transform: translateY(-50%) scaleY(.45);
    transition:
        opacity .18s ease,
        transform .22s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

.sidebar .menu__link:hover {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .06) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar .menu__link:hover::before {
    opacity: 1;
    transform: scale(1);
}

.sidebar .menu__link:active {
    color: #fff !important;
    transform: translate3d(0, 0, 0) scale(.982) !important;
}

.sidebar .menu__link:active::before {
    opacity: 1;
    transform: scale(1);
    background: var(--sidebar-nav-pressed);
}

.sidebar .menu__link:focus-visible {
    border-color: rgba(125, 211, 252, .55) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .16) !important;
}

.sidebar .menu__ico,
.sidebar .menu__text {
    position: relative;
    z-index: 1;
}

.sidebar .menu__ico {
    opacity: .9;
    transition: opacity .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1) !important;
}

.sidebar .menu__text {
    color: inherit !important;
    transition: color .18s ease, opacity .18s ease !important;
}

.sidebar .menu__link:hover .menu__ico,
.sidebar .menu__item--navigating .menu__ico,
.sidebar .menu__item--active .menu__ico {
    opacity: 1;
    transform: scale(1.035);
}

.sidebar .menu__item--active .menu__link,
.sidebar .menu__item--navigating .menu__link {
    color: #fff !important;
    border-color: rgba(125, 211, 252, .16) !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .13) !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
}

.sidebar .menu__item--active .menu__link::before,
.sidebar .menu__item--navigating .menu__link::before {
    opacity: 1;
    transform: scale(1);
    background: linear-gradient(135deg, var(--sidebar-nav-active-a), var(--sidebar-nav-active-b));
}

.sidebar .menu__item--active .menu__link::after,
.sidebar .menu__item--navigating .menu__link::after {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}

.sidebar .menu__item--leaving .menu__link {
    border-color: transparent !important;
    box-shadow: none !important;
}

.sidebar .menu__item--leaving .menu__link::before {
    opacity: 0;
    transform: scale(.985);
}

.sidebar .menu__item--leaving .menu__link::after {
    opacity: 0;
    transform: translateY(-50%) scaleY(.45);
}

/* The compact sidebar keeps the same rounded geometry instead of reverting to rectangles. */
body.body--hide-menu .sidebar .menu__link {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 5px auto !important;
    padding: 0 !important;
    border-radius: 14px !important;
    justify-content: center !important;
}

body.body--hide-menu .sidebar .menu__ico {
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
}

body.body--hide-menu .sidebar .menu__link::after {
    left: 3px;
    height: 18px;
}

body.body--hide-menu .sidebar .menu__item--active .menu__link,
body.body--hide-menu .sidebar .menu__item--active .menu__link:hover,
body.body--hide-menu .sidebar .menu__item--navigating .menu__link,
body.body--hide-menu .sidebar .menu__link:hover {
    border-radius: 14px !important;
}

@media (max-width: 1600px) {
    body:not(.body--hide-menu) .sidebar .menu__link {
        margin-left: 10px !important;
        margin-right: 10px !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar .menu__link,
    .sidebar .menu__link::before,
    .sidebar .menu__link::after,
    .sidebar .menu__ico,
    .sidebar .menu__text {
        transition: none !important;
    }
}