#header { color: var(--header-color); background: var(--header-bg); display: flex; position: fixed; box-shadow: var(--box-shadow-layer); top: 0; left: 0; width: 100%; z-index: 3; padding: $spacing-vertical / 2; box-sizing: border-box; } .header__item { flex: 0 0 content; padding-left: $spacing-vertical / 4; padding-right: $spacing-vertical / 4; .button-alt { background: var(--header-button-bg) !important; } } .header__item--wunderbar { flex-grow: 1; } .wunderbar { position: relative; .icon { position: absolute; left: 10px; top: $spacing-vertical / 2 - 4px; //hacked } } .wunderbar--active .icon-search { color: var(--color-primary); } .wunderbar__input { background: var(--search-bg); width: 100%; color: var(--search-color); height: $spacing-vertical * 1.5; line-height: $spacing-vertical * 1.5; padding-left: 38px; padding-right: 5px; border-radius: 2px; border: var(--search-border); transition: box-shadow var(--transition-duration) var(--transition-type); &:focus { background: var(--search-active-bg); color: var(--search-active-color); box-shadow: var(--box-shadow-focus); border-color: var(--color-primary); } }