@import “../vars.scss”; @import “./search-icon.scss”;

.sk-search-box {

flex:auto;

form {
  display:flex;
  margin:0;
  position:relative;
}

&__icon {
  flex:0 20px 20px;
  margin-top:10px;
  margin-left:10px;
  &:before {
    content:"";
    @include search-icon;
    background-size: contain;
    height:20px;
    width:20px;
    display: block;
  }
  opacity:0.3;
}

&__text {
  padding:10px 20px;
  width:100%;
  flex:3;
  font-size:18px;
  border:none;
  &:focus {
    outline:0;
  }
}

&__action {
  height:40px;
  visibility: hidden;
}

&__loader {
  flex:0 20px 20px;
  align-self: flex-end;
  margin:10px;

  &.is-hidden {
    display:none;
  }
}

}