// .hero{
  .search{
    @include xy-grid();
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    .input-group {
      @include breakpoint(small){
        @include xy-cell (12);
        margin-left: auto;
        margin-right: auto;
      }
      @include breakpoint(medium){
        @include xy-cell (6);
        margin-left: auto;
        margin-right: auto;
      }
      @include breakpoint(large){
        @include xy-cell (4);
        margin-left: auto;
        margin-right: auto;
      }
      position: relative;
      border-radius: 4rem;
      overflow: hidden;
      padding: 0;
      margin: 0;
      .appear {
        right: 0;
        position: absolute;
        height: 100%;
        padding: 0.3rem 1rem;
      }
    }
    .input-group * {
      margin: 0;
    }
    .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%);
      }
    }
  }
// } //end .hero