/* Variables */
.metronic {
    --tw-sidebar-transition-duration: 0.3s;
    --tw-sidebar-transition-timing: ease;
    --tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.desktop');
    --tw-sidebar-defualt-width: theme('custom.layouts.metronic.sidebar.width.desktop');
    --tw-header-height: theme('custom.layouts.metronic.header.height.desktop');
}

@media (max-width: theme('screens.lg')) {
    .metronic {
        --tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.mobile');
        --tw-header-height: theme('custom.layouts.metronic.header.height.mobile');
    }
}

/* Base */
.metronic .header {
    height: var(--tw-header-height);
}

.metronic .sidebar {
    width: var(--tw-sidebar-width);
}

.metronic.header-fixed .wrapper {
    padding-top: var(--tw-header-height);
}

/* Desktop mode */
@media (min-width: theme('screens.lg')) {
    .metronic .sidebar {
        width: var(--tw-sidebar-width);
        transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
    }

    .metronic .sidebar .sidebar-header {
        height: var(--tw-header-height);
    }

    .metronic .sidebar .sidebar-wrapper {
        width: var(--tw-sidebar-defualt-width);
    }

    .metronic .sidebar .sidebar-logo {
        width: var(--tw-sidebar-defualt-width);
    }

    .metronic .sidebar .small-logo {
        display: none;
    }

    .metronic.sidebar-fixed .wrapper {
        padding-left: var(--tw-sidebar-width);
        transition: padding-left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
    }

    .metronic.sidebar-fixed.header-fixed .header {
        left: var(--tw-sidebar-width);
        transition: left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
    }

    .metronic.sidebar-fixed.header-fixed .wrapper {
        padding-top: var(--tw-header-height);
    }

    .metronic.sidebar-collapse {
        --tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.desktopCollapse');
    }

    .metronic.sidebar-collapse .sidebar {
        transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
    }

    .metronic.sidebar-collapse .sidebar.animating {
        pointer-events: none;
    }

    .metronic.sidebar-collapse .sidebar:hover:not(.animating) {
        width: var(--tw-sidebar-defualt-width);
        transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
    }

    .metronic.sidebar-collapse .sidebar:not(:hover) .default-logo {
        display: none;
    }

    .metronic.sidebar-collapse .sidebar:not(:hover) .small-logo {
        display: flex;
    }

    .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-title,
    .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-arrow,
    .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-badge,
    .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-title,
    .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-arrow,
    .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-badge {
        display: none;
    }

    .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-accordion {
        display: none;
    }

    .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading {
        visibility: hidden;
        position: relative;
    }

    .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading::before {
        content: "...";
        color: currentColor;
        font-size: inherit;
        position: absolute;
        visibility: visible;
        display: inline-block;
        bottom: 50%;
        left: 0;
        margin-left: 0.225rem;
        transform: translateX(100%);
    }

    .metronic.sidebar-collapse .sidebar .sidebar-content {
        overflow: hidden;
    }
}
