.settings-menu {
	display: flex;
	align-items: center;
	gap: 0px 15px;
	margin-right: 10px;
}
.settings-menu > .btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-inline: 0 !important;
	border-radius: 0;
	color: var(--color-text-muted) !important;
	transition: 0.2s color ease-in-out;
}

.settings-menu > .btn:before {
	content: " ";
	position: absolute;
	/*bottom: -6px;*/
	bottom: -3px;
	left: 0;
	width: 0;
	/*height: 2px;*/
	height: 2px;
	background-color: #c7c7c8;
	/* opacity: 0; */
	/* transition: 0.2s width ease-in-out, 0.2s opacity ease-in-out; */
	transition: 0.2s width ease-in-out;
}

.settings-menu > .btn:hover,
.settings-menu > .btn.active {
	color: var(--color-text) !important;
}

.settings-menu > .btn:hover:before,
.settings-menu > .btn.active:before {
	width: 100%;
	opacity: 1;
}