// Common styles for "user-info" component .user-info { > a { display: flex; gap: 1em; min-width: 0; } .user-image-inner { position: relative; display: inline-block; } .user-detail { min-width: 0; @include breakpoint(tablet) { font-size: var(--font-down-1); } .name-line { display: flex; gap: 0.5em; color: var(--primary-high); .name, .username { @include ellipsis; } span:first-child { flex: 0 0 auto; font-weight: bold; } } .details { color: var(--primary); .d-icon-reply { color: var(--primary-medium); } } .title { margin-top: 0.25em; color: var(--primary-medium); } } &.medium { min-height: 60px; .username, .name { display: block; } .margin a { margin-left: 0; } &.badge-info { min-height: 80px; min-width: 250px; .granted-on { color: var(--primary-med-or-secondary-med); } .post-link { display: block; margin-top: 0.2em; } } } }