/* 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;
	}
}