@use '../../partials/text'; @use '../../partials/dir'; .people-selector { width: 100%; padding: var(--sp-extra-tight); @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight)); display: flex; align-items: center; cursor: pointer; @media (hover: hover) { &:hover { background-color: var(--bg-surface-hover); } } &:focus { outline: none; background-color: var(--bg-surface-hover); } &:active { background-color: var(--bg-surface-active); } &__name { @extend .cp-txt__ellipsis; flex: 1; min-width: 0; margin: 0 var(--sp-tight); color: var(--tc-surface-normal); } &__role { color: var(--tc-surface-low); } }