<commit_before>////
/// Side panel
/// @group Custom widgets
////

/// Side panel toggle button color
/// @type Color
$tc-side-panel-toggle-color: tint($brand-primary, 75);

.tc-side-panel {
	overflow-x: hidden;
	padding: 0 $padding-large;
	transition: 0.2s padding ease-out;

	:global(.btn) svg:global(.tc-svg-icon) {
		width: 1.4em;
		height: 1.4em;
		margin: 0;
	}

	.action-list {
		margin: 0 (-$padding-large);
		transition: 0.2s margin ease-out;
	}

	.link {
		text-align: left;
		font-size: 1em;
		text-transform: uppercase;

		:global(.tc-svg-icon) + span {
			padding-left: $padding-normal;
		}

		span {
			transition: 0.2s opacity linear;
		}
	}

	//override nav-pill a bit
	:global(.nav-pills .btn.btn-link) {
		padding: 12px 90px 12px $padding-large;
	}

	:global(.tc-side-panel-list-item):hover {
		background-color: darken($brand-primary, 2%);
	}

	&.docked {
		padding: 0 $padding-normal;

		:global(.nav-pills) {
			//override nav-pill a bit
			:global(.btn.btn-link) {
				padding-left: $padding-normal;
				padding-right: $padding-normal;
			}

			.toggle-btn {
				:global(.tc-svg-icon) {
					transform: rotate(-180deg);
				}

				:global(.btn.btn-link) {
					padding-left: 0;
				}

				&:before {
					margin: 12px 0 0 20px;
				}
			}

			.link span {
				opacity: 0;
			}
		}
	}

	.toggle-btn {
		margin-left: 0;
		margin-bottom: $padding-normal;

		:global(.btn.btn-link) {
			width: 20px;
			padding: 12px 0;
			outline: none;
			vertical-align: baseline;

			:global(.tc-svg-icon) {
				fill: $tc-side-panel-toggle-color;
				width: $svg-md-size;
				height: $svg-md-size;
				transition: 0.2s transform ease-out;
			}
		}

		&:before {
			color: $tc-side-panel-toggle-color;
			content: '|';
			font-weight: bold;
			height: 0.9em;
			margin: 12px 0 0 20px;
		}

		&:hover {
			background-color: transparent;
		}
	}
}<commit_msg>feat(components/SidePanel): fix style in accordance with Frontify (#371)<commit_after>////
/// Side panel
/// @group Custom widgets
////

/// Side panel toggle button color
/// @type Color
$tc-side-panel-toggle-color: tint($brand-primary, 75);

.tc-side-panel {
	overflow-x: hidden;
	padding: 0;
	transition: 0.2s padding ease-out;

	:global(.btn) svg:global(.tc-svg-icon) {
		width: $svg-lg-size;
		height: $svg-lg-size;
		margin: 0;
	}

	.action-list {
		margin: 0;
		transition: 0.2s margin ease-out;
	}

	.link {
		text-align: left;
		font-size: $font-size-small;
		text-transform: uppercase;

		:global(.tc-svg-icon) + span {
			margin-left: $padding-normal;
			vertical-align: text-bottom;
		}

		span {
			transition: 0.2s opacity linear;
		}
	}

	//override nav-pill a bit
	:global(.nav-pills .btn.btn-link) {
		padding: $padding-normal $padding-large;
	}

	:global(.tc-side-panel-list-item):hover {
		background-color: darken($brand-primary, 2%);
	}

	&.docked {
		padding: 0;

		:global(.nav-pills) {
			//override nav-pill a bit
			:global(.btn.btn-link) {
				padding: $padding-normal;
			}

			.toggle-btn {
				:global(.tc-svg-icon) {
					transform: rotate(-180deg);
				}
			}

			.link span {
				opacity: 0;
			}
		}
	}

	.toggle-btn {
		margin-bottom: $padding-normal + $padding-large;

		:global(.btn.btn-link) {
			outline: none;

			:global(.tc-svg-icon) {
				fill: $tc-side-panel-toggle-color;
				width: $svg-md-size;
				height: $svg-md-size;
				transition: 0.2s transform ease-out;
			}

			&:before {
				color: $tc-side-panel-toggle-color;
				content: '|';
				font-size: $font-size-base;
				font-weight: bold;
			}
		}

		&:hover {
			background-color: transparent;
		}
	}
}
{'fraction_non_alphanumeric': 0.17437622652088589, 'fraction_numerical': 0.020465377067563777, 'mean_word_length': 2.52917903066271, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3947578', 'n_tokens_mistral': 1714, 'n_tokens_neox': 1380, 'n_words': 272}