.hero{
  .search{
    .input-group * {
      margin: 0;
    }
    .input-group {
      position: relative;
      border-radius: 4rem;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    .input-group .appear {
      right: 0;
      position: absolute;
      height: 100%;
      padding: 0.3rem 1rem;
    }
    .button{
      border-color: $primary-color;
    }
    .appear{
      display:none;
    }
    input{
      &:active{
        border-color: $primary-color;
        background-color: $input-background-focus;
      }
      &:focus,&:focus-within{
        border-color: $primary-color;
        background-color: $input-background;
      }
      &:not(:placeholder-shown) {
        border:none;
        background-color: $input-background-focus;
        position: relative;
        right: 2rem;
        + .appear {
          display: block;
          background-color: scale-color($input-background-focus, $lightness: -20%);
          z-index: 2;
          &:hover {
            color: $white;
            background-color: $primary-color;
          }

        }
      }
    }
    .hollow {
      border-color: $primary-color;
      color: $primary-color;
      &::after {
      }
      &::placeholder {
        color: scale-color($primary-color, $lightness: -20%);
      }
      &:hover {
        background-color: scale-color($primary-color, $lightness: 95%);
      }
      &:active {
        background-color: scale-color($primary-color, $lightness: 85%);
      }
    }
  }
}