html,
body {
	background-color: var(--bg-color);
}

.desk-sidebar {
	@extend .standard-sidebar;

	.standard-sidebar-label {
		font-size: var(--text-xs);
		text-transform: uppercase;
		cursor: pointer;

		span {
			pointer-events: none;
		}
	}

	.standard-sidebar-section {
		margin-bottom: var(--margin-xl);

		&:last-of-type {
			margin-bottom: var(--margin-sm);
		}
	}
}

.widget-group {
	font-size: var(--text-base);
	margin-bottom: var(--margin-2xl);

	&.widget-charts {
		margin-top: var(--margin-sm);
	}

	.widget-group-head {
		@include flex(flex, space-between, center, null);

		.widget-group-title {
			color: var(--heading-color);
			font-weight: 600;
			font-size: var(--text-lg);
			margin-bottom: var(--margin-md);
		}
	}

	.legend {
		display: flex;
		padding: var(--padding-md);

		.legend-item {
			margin-right: 20px;
		}
	}

	.grid-col-3 {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		column-gap: 15px;
		row-gap: 15px;
		align-items: center;
	}

	.grid-col-2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		// grid-auto-rows: minmax(62px, 1fr);
		column-gap: 15px;
		row-gap: 15px;
		align-items: center;

		.full-width {
			grid-column-start: 1;
			grid-column-end: 3;
		}
	}

	.grid-col-1 {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
		// grid-auto-rows: minmax(62px, 1fr);
		column-gap: 15px;
		row-gap: 15px;
		align-items: center;
	}

	@media (max-width: 768px) {
		.legend {
			@include flex(flex, null, null, column);

			.legend-item {
				margin-right: 20px;
			}
		}

		.grid-col-2 {
			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
			.full-width {
				grid-column-start: 1;
				grid-column-end: 2;
			}
		}

		.grid-col-1 {
			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		}
	}
}

.widget {
	@include flex(flex, null, null, column);
	min-height: 1px;
	padding: 7px;
	border-radius: var(--border-radius-md);
	height: 100%;
	background-color: var(--card-bg);

	.btn {
		box-shadow: none;
	}

	&.widget-shadow {
		&:hover {
			box-shadow: var(--shadow-base);
		}
	}

	&.border {
		border: 1px solid var(--border-color);
	}

	.widget-head {
		@include flex(flex, space-between, center, null);

		.widget-label {
			min-width: 0px;

			.widget-title {
				@include flex(flex, null, center, null);
				font-size: var(--text-lg);
				font-family: inherit;
				font-weight: 500;
				line-height: 1.3em;
				color: var(--heading-color);
				cursor: default;

				svg {
					flex: none;
					margin-right: 6px;
					margin-left: -2px;
					box-shadow: none;
				}
			}
		}

		.widget-control {
			@include flex(flex, null, center, row-reverse);

			// Any immediate child
			> * {
				align-self: center;
				margin-left: 5px;
				box-shadow: none;
			}

			.drag-handle {
				cursor: all-scroll;
				cursor: grabbing;

				&:active {
					cursor: all-scroll;
					cursor: grabbing;
				}
			}

			.dashboard-date-field {
				width: 130px;
				height: 27px;

				.clearfix,
				.help-box {
					display: none !important;
				}

				.influxframework-control,
				.form-group {
					margin-bottom: 0px !important;
				}
			}
		}
	}

	&.sortable-ghost {
		background-color: var(--gray-100);
		border-color: var(--gray-100);
	}

	&.new-widget {
		@include flex(flex, center, center, null);
		min-height: 65px;
		box-shadow: none;
		background-color: var(--control-bg);
		color: var(--text-muted);
		border: 1px dashed var(--gray-400);
		cursor: pointer;
	}

	// Overrides for each widgets
	&.dashboard-widget-box {
		min-height: 240px;
		padding: var(--padding-md) var(--padding-lg);

		.filter-chart {
			background-color: var(--control-bg);
		}

		.btn-xs {
			box-shadow: none;
		}

		.chart-actions {
			.filter-label {
				line-height: 1.6em;
			}

			.chart-menu {
				font-size: $font-size-base;
			}
		}

		.widget-subtitle {
			font-size: $font-size-sm;
			color: $text-muted;
			margin-top: var(--margin-xs);
		}

		.widget-head {
			padding: var(--padding-sm);
			position: relative;
		}

		.widget-control {
			position: absolute;
			right: var(--margin-sm);
			top: var(--padding-sm);
		}

		.chart-loading-state {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.report-summary {
			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
			border: none;

			.summary-value {
				font-size: 20px;
			}
		}

		&.heatmap-chart {
			min-height: 0px;
			height: 280px;

			.widget-footer {
				display: none;
			}

			.widget-control {
				z-index: 1;
			}

			.influxframework-chart .chart-legend {
				display: none;
			}

			.chart-loading-state {
				height: 190px !important;
			}

			.widget-body {
				display: flex;
				max-height: 100%;
				margin: auto;
				margin-top: calc(-1 * var(--margin-md));

				.chart-container {
					height: 100%;
					.influxframework-chart {
						height: 100%;
					}
				}

				.heatmap-legend {
					display: flex;
					margin: 45px 20px 0 20px;

					.legend-colors {
						padding-left: var(--padding-md);
						list-style: none;
					}

					li {
						width: var(--margin-sm);
						height: var(--margin-sm);
						margin: var(--margin-xs);
					}

					.legend-label {
						color: #555b51;
						font-size: var(--text-xs);
						margin-left: var(--margin-md);
						line-height: 1.3;
					}

					@media (max-width: 991px) {
						display: none;
					}
				}
			}
		}

		@media (max-width: 768px) {
			&.dashboard-widget-box.heatmap-chart {
				display: none;
			}
		}
	}

	&.onboarding-widget-box {
		margin-bottom: var(--margin-2xl);
		padding: var(--padding-lg) !important;
		background-color: var(--bg-color);

		&.edit-mode:hover {
			background-color: var(--fg-color);

			.onboarding-step {
				&.active,
				&:hover {
					background-color: var(--bg-color);

					.step-index.step-pending {
						background-color: var(--fg-color);
					}
				}

				.step-index {
					background-color: var(--bg-color);
				}
			}
		}

		.widget-head {
			display: flex;

			.widget-subtitle {
				margin-top: 5px;
				color: var(--text-muted);
				font-size: var(--text-sm);
			}

			.widget-control {
				align-self: flex-start;
				margin-top: -5px;
				color: var(--text-muted);
			}
		}

		.widget-body {
			margin-top: 20px;
			display: flex;

			.onboarding-steps-wrapper {
				min-width: 350px;
			}

			.onboarding-step-preview {
				padding-left: var(--padding-lg);
				width: 100%;

				h1,
				h2 {
					font-size: var(--text-xl);
					font-weight: 600;
					margin-bottom: var(--margin-sm);
				}

				h3 {
					font-size: var(--text-lg);
					font-weight: 600;
					margin-bottom: var(--margin-sm);
				}

				.onboarding-step-footer {
					margin-top: var(--margin-md);
				}
			}

			.onboarding-step {
				@include flex(flex, space-between, center, null);
				border-radius: var(--border-radius);
				padding: 8px;
				font-size: var(--text-md);
				max-width: 350px;

				&.pending {
					.step-index.step-pending {
						display: flex;
					}
				}

				&.complete {
					.step-index.step-complete {
						display: flex;
					}

					.step-skip {
						display: none;
					}

					.icon {
						stroke: var(--white);
					}

					span {
						color: $text-color;
					}
				}

				&.active,
				&:hover {
					background-color: var(--fg-color);

					.step-index {
						background-color: var(--bg-color);
					}

					.step-skip {
						visibility: visible;
					}
				}

				.step-title {
					@include flex(flex, null, center, null);
				}

				.step-index {
					@include flex(flex, center, center, null);
					height: 20px;
					width: 20px;
					color: var(--text-on-light-gray);
					background-color: var(--fg-color);

					margin-right: var(--margin-sm);
					border-radius: var(--border-radius-full);

					&.step-pending {
						display: none;
					}

					&.step-complete {
						display: none;
						background-color: var(--primary);
						.icon use {
							stroke: var(--var(--fg-color));
						}
					}

					&.step-skipped {
						display: none;
						background-color: var(--blue-100);
						svg {
							stroke: var(--blue-600);
						}
					}
				}

				.step-skip {
					font-size: var(--text-md);
					visibility: hidden;
					cursor: pointer;
				}

				&.skipped {
					.step-index.step-skipped {
						display: flex;
					}

					.step-skip {
						display: none;
					}

					i {
						color: var(--text-muted);
					}

					span {
						color: var(--text-muted);
					}

					&:hover {
						span {
							color: var(--text-muted);
						}

						.step-skip {
							visibility: hidden;
						}
					}
				}
			}
		}

		@media (max-width: map-get($grid-breakpoints, "md")) {
			.widget-body {
				flex-direction: column;
				.onboarding-steps-wrapper {
					min-width: none;
				}
				.onboarding-step-preview {
					padding-left: 0;
					padding-top: var(--padding-lg);
				}
			}
		}
	}

	&.shortcut-widget-box {
		cursor: pointer;

		&:hover {
			.widget-title {
				color: var(--blue-500) !important;
			}

			svg.icon-xs {
				stroke: var(--blue-500) !important;
			}
		}

		.widget-title {
			cursor: pointer !important;
			font-size: var(--text-base) !important;
		}

		.indicator-pill {
			font-weight: 500;
			@extend .ellipsis;
		}
	}

	&.links-widget-box {
		padding: 18px 12px;

		.link-item {
			display: flex;
			text-decoration: none;
			font-size: var(--text-md);
			color: var(--text-color);
			padding: 4px;
			margin-left: -4px;
			margin-bottom: 4px;
			border-radius: var(--border-radius-md);
			cursor: pointer;

			&:hover {
				background-color: var(--fg-hover-color);

				.indicator-pill {
					background-color: var(--fg-hover-color);
				}
			}

			&:first-child {
				margin-top: 18px;
			}

			&:last-child {
				margin-bottom: 0px !important;
			}

			.link-content {
				flex: 1;
			}

			.disabled-link {
				color: var(--text-muted);
			}

			.popover {
				display: block;
				top: -60px;
				max-width: 220px;

				&.top > .arrow {
					left: 20%;
				}
			}

			.indicator-pill {
				margin-right: var(--margin-sm);
				height: 20px;
				padding: 3px 8px;
			}
		}
	}

	&.number-widget-box {
		cursor: pointer;
		height: 115px;
		padding: var(--padding-sm) var(--padding-md);

		.widget-head {
			.widget-title {
				font-weight: 500;
				color: var(--heading-color);
				font-size: var(--text-base);
				margin-top: var(--margin-xs);
			}

			.widget-control {
				right: -10px;
				top: -10px;
				height: 0px;
			}

			.card-actions {
				margin-top: -15px;
			}
		}

		.widget-body {
			text-align: left;

			.number-card-loading {
				@include flex(flex, space-between, center, null);
				height: 50px;
			}

			.widget-content {
				@include flex(flex, space-between, null, null);
				padding-top: var(--padding-xl);

				.number {
					font-weight: 600;
					font-size: 22px;
					line-height: 2.4em;
					color: var(--text-color);
				}

				.number-text {
					color: $text-muted;
					padding: var(--padding-xs);
					font-size: $font-size-base;
				}

				.card-stats {
					@include flex(flex, null, flex-end, column);
				}

				.percentage-stat-area {
					font-size: $font-size-sm;

					.indicator-pill-round {
						height: 18px;
						width: 18px;

						.icon-xs {
							width: 10px;
							height: 10px;
						}
					}

					.percentage-stat {
						margin-left: var(--margin-xs);
						vertical-align: bottom;
						font-weight: 500;
					}
				}

				.stat-period {
					margin-top: var(--margin-xs);
					font-size: 11px;
				}

				.green-stat {
					color: var(--dark-green-500);

					use {
						stroke: var(--dark-green-500);
					}
				}

				.red-stat {
					color: var(--red-500);

					use {
						stroke: var(--red-500);
					}
				}

				.grey-stat {
					color: var(--gray-600);
				}
			}
		}
	}

	&.quick-list-widget-box {
		.list-loading-state, .list-no-data-state {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 202px;
		}

		.refresh-list, .filter-list, .add-new {
			background-color: var(--btn-default-bg);
			cursor: pointer;

			&:hover {
				background-color: var(--btn-default-hover-bg);
			}
		}

		&:hover {
			.widget-head .widget-control {
				width: auto;
				visibility: visible;
				opacity: 1;
			}
		}

		.widget-head {
			.widget-label {
				padding-left: 6px;
			}

			.widget-control {
				width: 0px;
				visibility: hidden;
				opacity: 0;
				transition: visibility 0s, opacity 0.5s ease-in-out;
			}
		}

		.widget-body {
			display: flex;
			flex-direction: column;
			margin: 6px 0px;
			min-height: 202px;

			.quick-list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 3px 0px;
				padding: 3px 6px;
				border-radius: var(--border-radius);
				cursor: pointer;

				&:hover {
					background-color: var(--btn-default-bg);
				}

				.left {
					display: flex;
					flex-direction: column;
					flex: 1;

					.timestamp {
						font-size: smaller;
					}
				}

				.status {
					margin-left: 12px;
				}

				.right-arrow {
					margin-left: 6px;
					margin-right: -2px;
				}
			}
		}

		.widget-footer {
			.see-all {
				width: 100%;
				text-decoration: none;
				background-color: var(--btn-default-bg);

				&:hover {
					background-color: var(--btn-default-hover-bg);
				}
			}
		}
	}
}

.onboarding-success {
	margin: var(--margin-lg) auto;
	max-width: 75%;

	.success-state {
		height: 15rem !important;
		max-height: 150px;
		width: auto;
		margin-bottom: var(--margin-xl);
	}

	.btn {
		margin-top: var(--margin-md);
	}
}

.pill {
	position: relative;
	left: 2px;
	// font-weight: bold;
	display: inline-block;
	background: var(--text-muted);
	font-size: 12px;
	line-height: 20px;
	padding: 0 8px;
	color: var(--text-color);
	border-radius: 10px;
}

.zoom-out {
	transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
	transform: scale3d(0.5, 0.5, 0.5);
	opacity: 0;
	visibility: hidden;
}

@-webkit-keyframes zoom-in {
	from {
		opacity: 0;
		-webkit-transform: scale3d(0.7, 0.7, 0.7);
		transform: scale3d(0.7, 0.7, 0.7);
	}

	50% {
		opacity: 1;
	}
}

@keyframes zoom-in {
	from {
		opacity: 0;
		-webkit-transform: scale3d(0.7, 0.7, 0.7);
		transform: scale3d(0.7, 0.7, 0.7);
	}

	50% {
		opacity: 1;
	}
}

.zoom-in {
	-webkit-animation-name: zoom-in;
	animation-name: zoom-in;
	animation-duration: 400ms;
}

.workspace-skeleton {
	transition: ease;
	.widget-group-title {
		height: 15px;
		width: 200px;
	}
	.skeleton-card {
		background-color: var(--skeleton-bg);
		box-shadow: none;
		border-radius: var(--border-radius-lg);
	}
	.shortcut-widget-box {
		height: 60px;
	}
	.links-widget-box {
		height: 200px;
	}
}

.workspace-sidebar-skeleton {
	transition: ease;
	.sidebar-box {
		height: 40px;
		margin-bottom: 10px;
		margin-left: 10px;
		background-color: var(--skeleton-bg);

		&.child {
			margin-left: 30px;
		}

		&.section {
			height: 25px;
			margin-left: 0px;
		}
	}
}

[data-page-route="Workspaces"] {
	@media (min-width: map-get($grid-breakpoints, "lg")) {
		.layout-main {
			height: calc(100vh - var(--navbar-height) - var(--page-head-height) - 5px);
			.layout-side-section, .layout-main-section-wrapper {
				height: 100%;
				overflow-y: auto;
				scrollbar-color: var(--gray-200) transparent;
				[data-theme="dark"] & {
					scrollbar-color: var(--gray-800) transparent;
				}

				&::-webkit-scrollbar-track {
					background: transparent;
				}

				&::-webkit-scrollbar-thumb {
					background: var(--gray-200);
					[data-theme="dark"] & {
						background: var(--gray-800);
					}
				}
			}

			.layout-side-section {
				padding-right: 15px;
			}

			.layout-main-section {
				padding: var(--padding-md);
				margin-bottom: var(--margin-sm);
			}

			.desk-sidebar {
				margin-bottom: var(--margin-2xl);
			}
		}
	}

	.layout-main-section-wrapper {
		margin-top: -5px;
		padding-top: 5px;
	}

	.layout-main-section {
		background-color: var(--fg-color);
		box-shadow: var(--card-shadow);
		border-radius: var(--border-radius-lg);
		padding: var(--padding-sm);
	}

	.block-menu-item-icon svg{
		width: 18px;
		height: 18px;
		margin-right: 5px;
	}

	.standard-sidebar-item {
		justify-content: space-between;
		padding: 0px;

		.sidebar-item-control {
			> * {
				align-self: center;
				margin-left: 3px;
				box-shadow: none;
			}

			.drag-handle {
				cursor: all-scroll;
				cursor: grabbing;
				display: none;
			}

			.setting-btn, .duplicate-page {
				display: none;
			}

			.drop-icon {
				padding: 10px 12px 10px 2px;
			}

			svg {
				margin-right: 0;
			}

			.dropdown-list {
				top: 42px;
			}
		}

		.sidebar-item-label {
			flex: 1;
		}

		.item-anchor {
			display: flex;
			overflow: hidden;
			padding: 8px 0px 8px 12px;
			flex: 1;
		}
	}

	.sidebar-item-container {
		position: relative;
		.sidebar-item-container{
			margin-left: 10px;

			.standard-sidebar-item {
				justify-content: start;
			}
		}
	}

	.standard-sidebar-section.show-control {
		.desk-sidebar-item.standard-sidebar-item {

			&:hover, &.selected {
				.drag-handle {
					display: inline-block;
				}

				.setting-btn, .duplicate-page {
					display: inline-block;
					margin-right: 8px;
				}

				.drop-icon {
					padding: 10px 8px 10px 2px;
					margin-left: -8px;
				}
			}

			.block-click {
				pointer-events:none;
			}
		}
	}

	.codex-editor__loader {
		display: none !important;
	}

	.codex-editor {
		min-height: 630px;

		.codex-editor__redactor{
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			margin: 0px -7px;
			padding-bottom: 20px !important;

			.ce-block {
				width: 100%;
				padding-left: 0;
				padding-right: 0;

				.divider {
					height: 30%;
					position: absolute;
					top: 18px;
					right: 0;
					border-right: 1px solid var(--gray-400);
				}

				.ce-header b {
					font-weight: 600 !important;
				}

				.new-block-button {
					position: absolute;
					top: 14px;
					left: -22px;
					cursor: pointer;
					visibility: hidden;
					opacity: 0;
					transition: visibility 0s, opacity 0.5s ease-in-out;
				}

				.edit-mode {
					.widget-control > *, .paragraph-control > * {
						width: 0px;
						visibility: hidden;
						opacity: 0;
						transition: visibility 0s, opacity 0.5s ease-in-out;
					}

					.link-item, .quick-list-item, .see-all {
						pointer-events: none;
					}
				}

				&:hover {
					.widget-control > *, .new-block-button {
						width: auto;
						visibility: visible;
						opacity: 1;
					}
				}

				&.ce-block--focused {
					.widget {
						box-shadow: var(--shadow-base) !important;

						.widget-control > * {
							width: auto;
							visibility: visible;
							opacity: 1;
						}

						&.shortcut, &.header {
							background-color: var(--fg-color) !important;
						}

						&.onboarding {
							background-color: var(--fg-color);

							.onboarding-step {
								&.active,
								&:hover {
									background-color: var(--bg-color);

									.step-index.step-pending {
										background-color: var(--fg-color);
									}
								}

								.step-index {
									background-color: var(--bg-color);
								}
							}
						}
					}
				}

				&.ce-block--selected {
					.ce-block__content {
						background-color: inherit;
					}
				}

				.ce-block__content {
					max-width: 100%;
					height: 100%;
					padding: 7px;

					&> div {
						height: 100%;
					}

					.tune-btn > * {
						pointer-events: none;
					}

					.resizer {
						width: 10px;
						height: 100%;
						position:absolute;
						right: 0;
						bottom: 0;
						cursor: col-resize;
						border-color: transparent;
						transition: border-color 0.3s ease-in-out;

						&:hover {
							border-right: 3px solid var(--gray-400) !important;
						}
					}

					.ce-header {
						padding-left: 7px !important;
						margin-bottom: 0 !important;
						flex: 1;

						&:focus {
							outline: none;
						}
					}

					.block-list-container {
						left: 20px;
						top: 55px !important;
						width: 200px !important;
					}

					.dropdown-title {
						padding: 6px 10px;
						font-size: smaller;
						cursor: default;
					}

					.ce-paragraph[data-placeholder]:empty::before {
						opacity: 1;
					}

					.widget {
						&.edit-mode {
							padding: 7px 12px;

							&:hover {
								box-shadow: var(--shadow-base);
								background-color: var(--fg-color);
							}

							&.spacer {
								align-items: inherit;
								color: var(--text-muted);
								border: 1px dashed var(--gray-400);
								cursor: pointer;

								.widget-control > * {
									width: auto;
								}

								.spacer-left {
									min-width: 74px;
								}
							}
						}

						&.spacer {
							height: 18px !important;
						}

						&.ce-paragraph {
							display: block;
						}

						&.paragraph {
							cursor: text;

							.ce-paragraph {
								padding: 2px;
							}

							.paragraph-control {
								display: flex;
								flex-direction: row-reverse;
								position: absolute;
								right: 20px;
								gap: 5px;
								background-color: var(--card-bg);
								padding-left: 5px;

								.drag-handle {
									cursor: all-scroll;
									cursor: grabbing;
								}
							}
						}

						&.header {
							display: flex;
							justify-content: center;
							flex: 1;
							padding-left: 0px !important;
							min-height: 40px;
							box-shadow: none;
							background-color: var(--control-bg);
							color: var(--text-muted);
							cursor: text;

							.ce-header {
								padding-left: 14px !important;
							}
						}

						&.shortcut {
							background-color: var(--control-bg);
						}

						&:focus {
							outline: none;
						}
					}
				}
			}
		}

		svg {
			fill: none;
		}

		.ce-toolbar {

			&.ce-toolbar--opened {
				display: none;
			}

			svg {
				fill: currentColor;
			}

			.icon {
				stroke: none;

				&.icon--plus {
					width: 14px;
				}
			}

			.ce-settings {
				width: fit-content;

				.ce-settings__button, .cdx-settings-button {
					color: #707684;

					.icon {
						width: 14px;
					}
				}

				.cdx-settings-button--active {
					color: #388ae5;
				}

				.cdx-settings-button.disabled{
					pointer-events: none;
					opacity: .5
				}
				.cdx-settings-sidebar{
					position: absolute;
					right: 100%;
					top:0;
					background: #fff;
					width: 108px;
					height: 145px;
					box-shadow: 0 3px 15px -3px rgba(13,20,33,.13);
					border-radius: 0 4px 4px 0;z-index: 0;
				}
			}

			.ce-toolbar__settings-btn {
				display: none;
			}
		}

		.ce-inline-tool, .ce-inline-toolbar__dropdown {
			.icon {
				fill: currentColor;
			}

			svg {
				stroke: none;
			}
		}

		@media (min-width: 1199px) {
			.ce-toolbar__content {
				max-width: 930px;
			}
		}
		@media (max-width: 995px) {
			.ce-toolbar__content {
				max-width: 760px;
			}
		}

	}

	.cdx-marker {
		background: rgba(245,235,111,0.29);
		padding: 3px 0;
	}

	.header-inline-tool {
		border: none;
		background-color: transparent;
		margin-bottom: 2px;
	}

	.header-level-select {
		display: flex;
		flex-direction: column;
		padding: 6px;
	}

	.header-level-select .header-level {
		border: none;
		background-color: transparent;
		border-radius: var(--border-radius-sm);
		padding: 6px;
		margin: 2px 0px;

		&:hover {
			background-color: var(--fg-hover-color);
		}
	}

	.dropdown-btn {
		position: relative;
	}

	.dropdown-list {
		position: absolute;
		background-color: var(--fg-color);
		box-shadow: var(--shadow-base) !important;
		border-radius: var(--border-radius-sm);
		padding: 6px;
		top: 30px;
		right: 0;
		width: 150px;
		z-index: 1;
	}

	.dropdown-list .dropdown-item {
		cursor: pointer;
		padding: 6px 10px;
		font-size: small;
		border-radius: var(--border-radius-sm);
		margin: 1px 0px;
	}

	.dropdown-item-icon {
		margin-right: 5px;
	}

}
