﻿@charset "utf-8";

.azmenutree {
    --sidebar-back-color: #1A1C1E;
    --accent-color: #AB191E;
    --hover-bg: rgba(255, 255, 255, 0.33);
    list-style-type: none;
    background: var(--sidebar-back-color);
    padding: 0px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 110%;
    font-weight: 300;
}

.azmenutree-group-title {
    cursor: pointer;
    min-height: 30px;
    list-style-type: none;
    border: none;
    background: transparent;
    color: white;
    margin: 0px;
    padding: 3px 15px;
    padding-left: 10px;
    display: inline-block;
    width: 100%;
    transition: background 0.2s ease;
}

    .azmenutree-group-title:hover {
        background: var(--hover-bg);
    }

.azmenutree-group-children {
    list-style-type: none;
    padding: 0px;
    margin-left: 15px;
}

.azmenutree-item {
    list-style-type: none;
    background: transparent;
    color: white;
    margin: 0px;
    padding: 0px;
    transition: all 0.2s ease-in-out;
    border-left: 4px solid transparent;
}

    .azmenutree-item > a {
        color: white;
        cursor: pointer;
        min-height: 35px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        width: 100%;
        text-decoration: none;
    }

    .azmenutree-item > a:hover {
        color: white !important;
    }

    .azmenutree-item:hover:not(.selected) {
        background: linear-gradient(to right, var(--hover-bg) 0%, rgba(255, 255, 255, 0.05) 60%, transparent 100%);
        border-left: 4px solid #666;
    }

    .azmenutree-item.selected {
        background: linear-gradient(to right, rgba(171, 25, 30, 0.9) 0%, rgba(171, 25, 30, 0.6) 60%, transparent 100%);
        border-left: 4px solid var(--accent-color);
        color: #ffffff !important;
        font-weight: 600;
    }

        .azmenutree-item.selected > a {
            color: white !important;
        }

    .azmenutree-item.disabled,
    .azmenutree-item.disabled > a {
        text-decoration: line-through;
        color: #888 !important;
        font-style: italic;
        cursor: not-allowed;
        background: transparent !important;
        border-left: 4px solid transparent !important;
    }


@media (max-width: 1024px) {
    .azmenutree-group-title {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .azmenutree-item > a {
        padding-top: 3px;
        padding-bottom: 3px;
    }
}
