﻿.eControls .eBar {
    & .k-panelbar {
        width: 100%;
        border-radius: var(--radius-lg);
        border: none;
        background: transparent;
        font-weight: 600;
    }

    & .k-panelbar-item {
    }

    & .k-panelbar-header {
        border: none !important;
    }

        & .k-panelbar-header > .k-link,
        & .k-item {
            padding: 6px 16px !important;
            margin: 0 8px;
            border-radius: var(--radius-sm);
            color: var(--gray-800) !important;
        }

    & .k-link.k-state-selected {
        background: transparent !important;
    }

    & .k-link:focus,
    & .k-link.k-state-focus,
    & .k-link.k-state-focused {
        box-shadow: none !important;
    }

    & .k-panelbar-item-text {
        font-weight: 800;
        color: var(--gray-500);
        flex-grow: 1;
    }

    & i {
        width: 20px;
        color: var(--brand-400);
    }

    & .k-menu-link-text {
        gap: 8px;
    }

    & .k-menu-link-text {
        color: var(--gray-700);
        font-weight: 600;
    }

    & .k-i-arrow-chevron-up::before,
    & .k-i-arrow-chevron-down::before {
        color: var(--gray-500);
    }

    & .k-panelbar-header > .k-link.k-selected {
        background: var(--brand-50);
    }

    & .k-link.k-focus {
        box-shadow: none;
    }

    & .k-menu-link-text i {
        display: none;
    }

    & .k-hover .k-menu-link-text i {
        display: block;
        transition: all .4s ease;
    }

    & .k-panelbar-header .k-panelbar-header {
        padding: 2px 0 2px 20px;
    }
}
