#header{
  background-color: $col-alt-bg;
  color: $col-alt-fg;
  display: flex;
  padding: 1em;
}

#logo{
  flex: 1 1 0px;
}

#search-bar{
  position: relative;
}

#search-icon{
  pointer-events: none;
}

#search-icon,
#close-search-icon{
  position: absolute;
  right: .4em;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
  display: block;
}
#search-input {
  -webkit-appearance: textfield;
  border-radius: 10em;
  padding: .2em .4em;
  border: 1px solid grey;
  & ~ #close-search-icon{
    opacity: 0;
  }
  &:focus{
    & ~ #close-search-icon{
      opacity: 1;
    }
    & ~ #search-icon{
      visibility: hidden;
    }
  }
}