﻿/**All rights reserved, copyright © licensed - ยัวร์วิชั่นฯ (https://yourvisioninfo.com). */
.leftbar-menu {
    --urs-leftbarmenu-font-size: .875rem;
    --urs-leftbarmenu-chevron-font-size: .725rem;
    --urs-leftbarmenu-submenuicon-font-size: .6rem;
    --urs-leftbarmenu-opac: .75;
    --urs-leftbarmenu-hover-opac: 1;
    --urs-leftbarmenu-hover-textstroke: .15px;
    --urs-leftbarmenu-bordertop-thickness: 1px;
    --urs-leftbarmenu-transition-color-filter: .18s;
    --urs-leftbarmenu-transition-transform: .18s;
    --urs-leftbarmenu-submenu-padding-y: .5rem;
    --urs-leftbarmenu-padding-y: .7rem;
    --urs-leftbarmenu-padding-x: .25rem;
    font-size: var(--urs-leftbarmenu-font-size);
}

.leftbar-menu, .leftbar-submenu {
    list-style: none;
    padding: 0;
}

    .leftbar-menu .menu-icon {
        --urs-leftbarmenu-font-size: 1.25rem;
        margin: 0 .3rem .25rem;
        width: var(--urs-leftbarmenu-font-size);
        height: var(--urs-leftbarmenu-font-size);
        font-size: var(--urs-leftbarmenu-font-size);
        overflow: visible;
        transition: filter linear var(--urs-leftbarmenu-transition-color-filter);
    }

    .leftbar-menu .menu-link {
        display: flex;
        align-items: center;
        padding: var(--urs-leftbarmenu-padding-y) var(--urs-leftbarmenu-padding-x);
        color: hsl(from currentColor h s l/var(--urs-leftbarmenu-opac));
        fill: hsl(from currentColor h s l/var(--urs-leftbarmenu-opac));
        border-left: 3px solid transparent;
        border-top: var(--urs-leftbarmenu-bordertop-thickness) solid transparent;
        transition: color linear var(--urs-leftbarmenu-transition-color-filter), background-color linear var(--urs-leftbarmenu-transition-color-filter);
    }

    .leftbar-menu .badge {
        padding: .5rem .35rem .35rem;
        margin: 0 .125rem .25rem;
        -webkit-text-stroke: 0;
    }

    .leftbar-menu .menu-chevron {
        width: var(--urs-leftbarmenu-chevron-font-size);
        height: var(--urs-leftbarmenu-chevron-font-size);
        font-size: var(--urs-leftbarmenu-chevron-font-size);
        overflow: visible;
        margin-bottom: .15rem;
        transition: transform linear var(--urs-leftbarmenu-transition-transform);
    }

    .leftbar-menu .menu-link.active,
    .leftbar-menu .menu-link:hover {
        border-left: 3px solid var(--bs-info);
    }

    .leftbar-menu .menu-link.active,
    .leftbar-menu .menu-link:hover,
    .leftbar-menu > .menu-item.active > .menu-link {
        color: hsl(from currentColor h s l/var(--urs-leftbarmenu-hover-opac));
        fill: hsl(from currentColor h s l/var(--urs-leftbarmenu-hover-opac));
        -webkit-text-stroke: var(--urs-leftbarmenu-hover-textstroke);
        background-color: hsl(from var(--bs-body-color) h s l/.1);
        border-top: var(--urs-leftbarmenu-bordertop-thickness) solid var(--bs-border-color);
    }

    .leftbar-menu > .menu-item.active > .menu-link {
        border-left: 3px solid var(--bs-warning-text-emphasis);
    }

        .leftbar-menu > .menu-item.active > .menu-link > .menu-chevron,
        .leftbar-menu > .menu-item > .menu-link:active > .menu-chevron,
        .leftbar-menu > .menu-item:hover > .menu-link > .menu-chevron,
        .leftbar-menu > .menu-item > .menu-link:hover > .menu-chevron,
        .leftbar-menu > .menu-item.active > .menu-link > .menu-icon,
        .leftbar-menu > .menu-item > .menu-link:active > .menu-icon,
        .leftbar-menu > .menu-item:hover > .menu-link > .menu-icon,
        .leftbar-menu > .menu-item > .menu-link:hover > .menu-icon {
            filter: contrast(1.5) brightness(1.15);
        }

    .leftbar-menu > .menu-item > .menu-title {
        --urs-leftbarmenu-font-size: .75rem;
        --urs-leftbarmenu-opac: .35;
        padding: .5rem .5rem;
        text-transform: uppercase;
        font-size: var(--urs-leftbarmenu-font-size);
        letter-spacing: .3px;
        -webkit-text-stroke: .3px;
        color: hsl(from currentColor h s l/var(--urs-leftbarmenu-opac));
        fill: hsl(from currentColor h s l/var(--urs-leftbarmenu-opac));
    }

    .leftbar-menu .leftbar-submenu > .submenu-item.active > .submenu-link > .menu-chevron,
    .leftbar-menu > .menu-item.active > .menu-link .menu-chevron {
        transform: rotate(90deg);
    }

    .leftbar-menu .leftbar-submenu {
        display: none;
        background-color: hsl(from var(--bs-body-color) h s l/.05);
        padding-left: 1rem;
    }

        .leftbar-menu .leftbar-submenu .leftbar-submenu {
            background-color: transparent;
        }

        .leftbar-menu .leftbar-submenu > .submenu-item > .submenu-link > .badge {
            margin: 0 .15rem;
            padding: .5rem .5rem .35rem;
        }

        .leftbar-menu .leftbar-submenu > .submenu-item > .submenu-link {
            display: flex;
            align-items: center;
            padding: var(--urs-leftbarmenu-submenu-padding-y) var(--urs-leftbarmenu-padding-x);
            color: hsl(from currentColor h s l/var(--urs-leftbarmenu-opac));
            fill: hsl(from currentColor h s l/var(--urs-leftbarmenu-opac));
            border-top: 1px solid transparent;
            transition: color linear var(--urs-leftbarmenu-transition-color-filter), background-color linear var(--urs-leftbarmenu-transition-color-filter), border linear var(--urs-leftbarmenu-transition-color-filter);
        }

            .leftbar-menu .leftbar-submenu > .submenu-item.active > .submenu-link,
            .leftbar-menu .leftbar-submenu > .submenu-item > .submenu-link:active,
            .leftbar-menu .leftbar-submenu > .submenu-item > .submenu-link:hover {
                color: hsl(from currentColor h s l/var(--urs-leftbarmenu-hover-opac));
                fill: hsl(from currentColor h s l/var(--urs-leftbarmenu-hover-opac));
                -webkit-text-stroke: var(--urs-leftbarmenu-hover-textstroke);
                /*background-color: hsl(from var(--bs-body-color) h s l/.035);*/
                /*border-top: 1px solid var(--bs-border-color);*/
            }

            .leftbar-menu .leftbar-submenu > .submenu-item > .submenu-link > .submenu-icon {
                width: var(--urs-leftbarmenu-submenuicon-font-size);
                height: var(--urs-leftbarmenu-submenuicon-font-size);
                font-size: var(--urs-leftbarmenu-submenuicon-font-size);
                overflow: visible;
                margin-right: .5rem;
                margin-bottom: .125rem;
                transition: filter linear var(--urs-leftbarmenu-transition-color-filter);
            }

            .leftbar-menu .leftbar-submenu > .submenu-item.active > .submenu-link > .menu-chevron,
            .leftbar-menu .leftbar-submenu > .submenu-item > .submenu-link:hover > .menu-chevron,
            .leftbar-menu .leftbar-submenu > .submenu-item.active > .submenu-link > .submenu-icon,
            .leftbar-menu .leftbar-submenu > .submenu-item > .submenu-link:hover > .submenu-icon {
                filter: contrast(1.5);
            }
/*.leftbar-menu .menu-open { display: block; }*/
