.textentry { cursor: text; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; flex-direction: row; font-size: 16px; &.is-multiline { align-items: flex-start; white-space: normal; } .content-label, .placeholder { flex-grow: 1; } .placeholder { opacity: 0.2; pointer-events: none; display: none; } .iconpanel { position: absolute; right: 0; font-size: 24px; padding-right: 10px; pointer-events: none; } &.has-icon { padding-right: 30px; } .content-label, .prefix-label, .suffix-label, .placeholder { padding: 10px; overflow: hidden; } .prefix-label, .suffix-label { flex-shrink: 0; opacity: 0.5; background-color: rgba( black, 0.8 ); } .prefix-label { order: -1; flex-shrink: 0; } &.has-placeholder { .placeholder { display: flex; } .content-label { display: none; } } &:hover { .placeholder { display: none; } .content-label { display: flex; } } &.invalid { box-shadow: 0px 0px 1px 2px #f8356b; } }