.c3-sidebar-navigation {
    --c3-label-spacing: 24px;

    width: auto;
    min-height: 0;
    position: fixed;
    top: 96px;
    right: 64px;
    bottom: 0;
    z-index: 1;
    padding: 0;
}

.c3-sidebar-navigation .elementor-widget-image figure {
    position: relative;
}

.c3-sidebar-navigation .elementor-widget-image figure img {
    max-width: 48px !important;
    transform: translateZ(0) scale(1);
    position: relative;
    transform-origin: 100% 50%;
    z-index: 2;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 0;
    transition: transform 600ms, border-color 100ms, border-radius 100ms;
}

.c3-sidebar-navigation .elementor-widget-image:hover figure img,
.c3-sidebar-navigation .elementor-widget-image:active figure img,
.c3-sidebar-navigation .elementor-widget-image.is-active figure img {
    transform: translateZ(0) scale(1.2);
}

.c3-sidebar-navigation .elementor-widget-image:active figure img {
    border-color: var(--e-global-color-primary);
    border-radius: 6px;
}

.c3-sidebar-navigation .elementor-widget-image figure figcaption {
    position: absolute;
    top: 50%;
    right: calc(100% + var(--c3-label-spacing));
    transform: translate(calc(50% + var(--c3-label-spacing)), -50%) rotate(90deg);
    transform-origin: 50% 50%;
    z-index: 1;
    margin-block-start: 0 !important;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: transform 600ms, visibility 600ms 600ms, opacity 600ms;
}

.c3-sidebar-navigation .elementor-widget-image:hover figure figcaption,
.c3-sidebar-navigation .elementor-widget-image.is-active figure figcaption {
    transform: translate(50%, -50%) rotate(90deg);
    visibility: visible;
    opacity: 1;
    transition: transform 600ms, visibility 600ms 0ms, opacity 600ms;
}

@media (max-width: 1024px) {
    .c3-sidebar-navigation {
        height: auto;
        top: 25vh;
        right: 36px;
        bottom: auto;
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        transition: transform 400ms 400ms, opacity 400ms 400ms, visibility 0ms 400ms;
    }

    .c3-sidebar-navigation .e-con-inner {
        justify-content: flex-start !important;
        gap: 4px;
    }

    .c3-sidebar-navigation .elementor-widget-image figure {
        width: 4px;
        height: 8px;
        background-color: var(--e-global-color-accent);
        transition: height 300ms, background-color 300ms;
    }

    .c3-sidebar-navigation .elementor-widget-image.is-active figure {
        height: 16px;
        background-color: var(--e-global-color-primary);
    }

    .c3-sidebar-navigation .elementor-widget-image figure img,
    .c3-sidebar-navigation .elementor-widget-image figure figcaption {
        display: none;
    }

    .c3-navigation--open .c3-sidebar-navigation {
        transform: translateX(16px);
        opacity: 0;
        visibility: hidden;
        transition: transform 400ms, opacity 400ms, visibility 0ms 400ms;
    }
}