@import '../_partials/index';

:global {
	.SettingsSidebar {
		@include theme-background-gray15-else-graydarkalt;
		width: 280px;
		flex-shrink: 0;
		padding: 10px 20px;

		@include if-theme-light() {
			border-right: none;
		}
		@include if-theme-dark() {
			border-right: 2px solid $gray-dark;
		}

		a {
			height: 36px;
			line-height: 36px;
			text-decoration: none;
			margin: 0 -10px;
			padding: 0 10px;
			font-weight: 700;
			@include theme-color-gray-else-gray15;
			@include tracking(40);
			display: flex;
			position: relative;
			border-radius: 4px;

			&.Active {
				@include theme-background-white-else-graydark;
				@include theme-color-graydark-else-white;
			}

			&:hover:not(.Active) {
				@include theme-background-gray15-else-graydark50;
				@include theme-color-graydark50-else-white;
			}
		}
	}
}