@import url('../../default/css/sidebar_config.css');

.spod-config-sidebar.bg-background-sidebar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sideactionbar-bg) 98%, white) 0%, color-mix(in srgb, var(--sideactionbar-surface) 96%, var(--sideactionbar-bg)) 100%) !important;
    color: var(--sideactionbar-text);
}

html.dark .spod-config-sidebar.bg-background-sidebar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sideactionbar-dark-bg) 98%, black) 0%, color-mix(in srgb, var(--sideactionbar-dark-surface) 96%, var(--sideactionbar-dark-bg)) 100%) !important;
    color: var(--sideactionbar-text);
}

.spod-config-sidebar.border-border-dark,
.spod-config-sidebar .border-border-dark {
    border-color: var(--sideactionbar-border) !important;
}

html.dark .spod-config-sidebar.border-border-dark,
html.dark .spod-config-sidebar .border-border-dark {
    border-color: var(--sideactionbar-border) !important;
}

.spod-config-sidebar .text-slate-400,
.spod-config-sidebar .spod-config-sidebar__link,
.spod-config-sidebar .spod-config-sidebar__footer-link {
    color: var(--sideactionbar-text) !important;
}

html.dark .spod-config-sidebar .text-slate-400,
html.dark .spod-config-sidebar .spod-config-sidebar__link,
html.dark .spod-config-sidebar .spod-config-sidebar__footer-link {
    color: var(--sideactionbar-text) !important;
}

.spod-config-sidebar .text-slate-500,
.spod-config-sidebar .text-slate-600,
.spod-config-sidebar .text-slate-300 {
    color: var(--sideactionbar-text-muted) !important;
}

html.dark .spod-config-sidebar .text-slate-500,
html.dark .spod-config-sidebar .text-slate-600,
html.dark .spod-config-sidebar .text-slate-300 {
    color: var(--sideactionbar-text-muted) !important;
}

@media (min-width: 1024px) {
    .config-workspace-shell--with-sidebar {
        grid-template-columns: 7.5rem minmax(0, 1fr);
    }

    .config-sidebar-shell {
        width: 7.5rem;
        height: calc(100vh - 4rem);
    }

    .config-sidebar-panel {
        border-right-color: transparent !important;
        background: linear-gradient(180deg, color-mix(in srgb, var(--sideactionbar-bg) 98%, white) 0%, color-mix(in srgb, var(--sideactionbar-surface) 96%, var(--sideactionbar-bg)) 100%) !important;
        box-shadow: none;
    }

    .spod-config-sidebar__user-card {
        padding: 0.35rem 0 0.15rem;
        border-radius: 0;
        background: transparent;
        border: 0;
    }

    .spod-config-sidebar__user-card-title,
    .spod-config-sidebar__user-email,
    .spod-config-sidebar__user-meta {
        display: none;
    }

    .spod-config-sidebar__user-avatar {
        width: 2.7rem;
        height: 2.7rem;
        flex-basis: 2.7rem;
        font-size: 0.78rem;
    }

    .spod-config-sidebar__user-card-shell {
        gap: 0.42rem;
    }

    .spod-config-sidebar__user-name {
        display: block;
        font-size: 0.49rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        text-align: center;
        color: var(--sideactionbar-text-muted);
        line-height: 1.25;
    }

    .spod-config-sidebar__nav {
        gap: 0.92rem !important;
    }

    .spod-config-sidebar__link,
    .spod-config-sidebar__footer-link {
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
        justify-content: center;
        gap: 0.16rem !important;
        min-height: 5.05rem;
        padding: 0.94rem 0.42rem !important;
        border-radius: 0.8rem !important;
        text-align: center;
        border: 1px solid color-mix(in srgb, var(--sideactionbar-border) 78%, transparent);
        background: color-mix(in srgb, var(--sideactionbar-surface) 58%, transparent);
    }

    .spod-config-sidebar__icon {
        font-size: 1.82rem !important;
    }

    .spod-config-sidebar__label {
        display: block !important;
        font-size: 0.64rem !important;
        font-weight: 700 !important;
        line-height: 1.15;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        max-width: 100%;
        color: inherit;
    }

    .spod-config-sidebar__footer-link {
        color: var(--sideactionbar-text-muted) !important;
    }

    .spod-config-sidebar__link:hover,
    .spod-config-sidebar__link--active {
        background: linear-gradient(180deg, color-mix(in srgb, var(--sideactionbar-primary) 16%, var(--sideactionbar-surface)) 0%, color-mix(in srgb, var(--sideactionbar-primary) 8%, var(--sideactionbar-surface)) 100%) !important;
        border-color: color-mix(in srgb, var(--sideactionbar-primary) 30%, var(--sideactionbar-border)) !important;
        color: var(--sideactionbar-text-hover) !important;
        box-shadow: inset -3px 0 0 0 var(--sideactionbar-primary), 0 10px 18px color-mix(in srgb, var(--sideactionbar-primary) 16%, transparent) !important;
    }

    .spod-config-sidebar__link--active .spod-config-sidebar__icon {
        color: var(--sideactionbar-primary) !important;
    }
}