.PickerSelectedItem { display: flex; align-items: center; background: var(--color-chat-hover); height: 2rem; min-width: 2rem; margin-left: 0.5rem; margin-bottom: 0.5rem; padding-right: 1rem; border-radius: 1rem; cursor: pointer; position: relative; overflow: hidden; flex-shrink: 1; transition: background-color .15s ease; max-width: calc(50% - 0.5rem); &.minimized { padding-right: 0; } &:hover { background-color: var(--color-item-active); } &.closeable:hover { background-color: rgba(var(--color-error-rgb), 0.16); .item-remove { opacity: 1; } .Avatar, .item-icon { opacity: 0; } } &.search-date { .item-remove { background: var(--color-primary); } &:hover { background: var(--color-chat-hover); } .item-name { font-size: 0.875rem; } } .SearchInput & { flex: 1 0 auto; position: relative; top: .25rem; left: -.125rem; color: var(--color-text-secondary); } .Avatar, .item-icon { width: 2rem; height: 2rem; opacity: 1; flex-shrink: 0; transition: opacity .15s ease; i { font-size: 2rem; } } .item-icon { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border-radius: 50%; background-color: var(--color-primary); color: white; i { font-size: 1.25rem; position: relative; top: -1px; } } .item-name { margin-left: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; .emoji.emoji-small { width: 1.125rem; height: 1.125rem; background-size: 1.125rem; vertical-align: -2px; } } .item-remove { position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--color-error); font-size: 1.5rem; color: white; opacity: 0; transition: opacity .15s ease; } &[dir=rtl] { padding-left: 1rem; padding-right: 0; &.minimized { padding-right: 0; padding-left: 0; } .SearchInput & { left: auto; right: -.125rem; } .item-name { margin-left: 0; margin-right: 0.5rem; } .item-remove { left: auto; right: 0; } } }