@import "../../core/scss/src/variables/common";
@import "../../core/scss/src/variables/color";
@import "../../core/scss/src/mixin/direction";
@import "variable";

@mixin sidebar-item($radius: 5px) {
	.sidebar-item {
		display: block;
		margin-bottom: 3px;
		text-decoration: none;
		transition: $main-transition;
		border-radius: $radius;

		i {
			font-size: 1.1em;
			@include margin-right(10px);
			color: map-get($theme-colors, 'secondary');
		}

		span {
			color: black;
			font-weight: 500;
			font-size: .925em;
		}

		.sidebar-badge {
			color: white;
			background-color: map_get($theme-colors, 'primary');
			padding: 4px 6px;
			border-radius: $radius;
			font-size: .8em;
		}

		&.active {
			background-color: map-get($theme-colors, 'primary');

			.sidebar-badge {
				background-color: white;
				color: map_get($theme-colors, 'primary');
			}

			span {
				color: white;
			}

			i {
				color: $icon-active-color;
			}
		}

		&:hover, &:visited, &:link, &:active {
			text-decoration: none;
		}

		&:not(.active):hover {
			background-color: $hover-color;
		}
	}
}