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

.sk-input-filter {

flex:auto;
border-radius: 3px;
border: 1px solid $sk-border-color;

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

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

&__text {
  padding:7px;
  width:100%;
  flex:3;
  font-size:14px;
  background: transparent;
  border:none;
  color: $sk-text-color;
  &:focus {
    outline:0;
  }
}

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

&__remove {
  &:before {
    flex:0 20px 20px;
    align-self: flex-end;
    padding:5px 10px;
    line-height: 30px;
    color: $sk-text-color;
    content: "x";
    cursor: pointer;
  }

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

}