.additional-authors-search { position: relative; .additional-authors-search__input { padding: 5px; width: 100%; } .additional-authors-search-list { position: absolute; left: 0; right: 0; background-color: white; z-index: 10; } .additional-authors-search-item, .additional-authors-new-item { padding: 10px; border: 1px solid rgba(33, 33, 33, .3 ); border-bottom: 1px solid rgba( 99, 99, 99, .1 ); border-top: none; cursor: pointer; &.is-over { background-color: rgba(33, 33, 33, .15 ); color: black; } } } .additional-authors { .author-item { display: flex; position: relative; padding: 5px 5px 5px 25px; border-radius: 3px; border: 1px solid #dadada; margin-right: 5px; margin-top: 5px; .author-item__delete { padding: 5px 4px; height: 10px; align-self: center; font-size: 20px; border-radius: 50%; border: 1px solid rgba(117 ,117 , 117 , 1); transition: all 333ms ease-in-out; color: rgba(117 ,117 , 117 , 1); cursor: pointer; display: block; font-family: monospace; line-height: 10px; margin-left: auto; margin-right: 0; &:hover { background-color: rgba(240, 0, 0, 1); border: 1px solid rgba(240, 0, 0, 1 ); color: white; box-shadow: 0 1px 2px -1px rgba( 33, 33, 33, .3 ); } } .author-item__move { position: absolute; left: 5px; line-height: 0; cursor: pointer; color: rgba(33, 33, 33, .4); &.author-item__up { top: 7px; } &.author-item__down { bottom: 7px; } } &:first-child { .author-item__up { display: none; } } &:last-child { .author-item__down { display: none; } } &.is-main-author { border: 1px solid red; } &.is-new-author { background-color: forestgreen; } &.is-new-author:nth-child(2) { .author-item__up { display: none; } } } .author-item__nicename { display: block; font-size: 90%; color: rgba(99, 99, 99, .8); } } .autor-item__name { .is-main-author & { color: black; } }