:host { position: absolute; display: flex; z-index: 5; padding: 15px; transition: all 125ms cubic-bezier(0, 0, 0.2, 1); > div { flex: 1 1 0; width: 100%; height: 100%; opacity: 0; background: rgba(255, 255, 255, .125); border-radius: 5px; border: 1px solid rgba(255, 255, 255, .25); transition: all 125ms cubic-bezier(0, 0, 0.2, 1); } &.highlighted { padding: 0px; border-radius: 3px; > div { opacity: 1; background: rgba(255, 255, 255, .5); } } &:not(.active) { pointer-events: none; opacity: 0; } ::ng-deep tab-header { // placeholders opacity: 0; } }