.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); } .tierHeader::before, .tierHeader::after { flex: 1 1; border-bottom: 3px solid var(--color-bg-high); margin: auto; content: ""; } .tierHeader::before { margin-right: 10px; } .tierHeader::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); }