.ownScores {
	padding: var(--s-2);
	border-radius: var(--radius-box);
	margin: 0 auto;
	background-color: var(--color-bg-high);
	font-size: var(--font-sm);
	font-weight: var(--weight-semi);
	list-style-type: none;
	padding-inline: var(--s-4);
	text-align: center;
}

.success {
	color: var(--color-success);
}

.fail {
	color: var(--color-error);
}

.tierHeader {
	display: flex;
	flex-direction: row;
	color: var(--color-text-accent);

	&::before,
	&::after {
		flex: 1 1;
		border-bottom: 3px solid var(--color-bg-high);
		margin: auto;
		content: "";
	}

	&::before {
		margin-right: 10px;
	}

	&::after {
		margin-left: 10px;
	}
}

.passedInfoContainer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.passedHeader {
	color: var(--color-text-high);
	font-size: var(--font-xs);
}

.userStatus {
	border-radius: var(--radius-selector);
	height: var(--selector-size-sm);
	background-color: var(--color-text-accent);
	color: var(--color-text-inverse);
	font-size: var(--font-xs);
	font-weight: var(--weight-semi);
	padding-inline: var(--s-1-5);
}

.userStatusFailed {
	background-color: var(--color-error);
}

.suggestionS {
	border-radius: var(--radius-full);
	background-color: var(--color-bg);
	color: var(--color-text);
	margin-inline-end: var(--s-1);
	padding-inline: var(--s-1);
}
