//--------------------------------------------------
// class - main
//--------------------------------------------------
&--main {
  position: relative;

  .search {
    &__pane {
      width: 100%;
      
      &.popout { 
        @include responsive(width, calc(100vw - 2*#{$gutter-small}), rem-calc(600), rem-calc(600));

        display: none;
        position: absolute;
        top: 0;
        right: 0;
        z-index: $z-300;
      }

      &.popout.active { display: block; }
    }

      &__close {
        @include button-close;

        position: absolute;
        top: 50%;
        right: rem-calc(16);

        transform: translateY(-50%) scale(.7);
      }

      &__icon {
        @include icon-search-green;

        position: absolute;
        top: 50%;
        left: rem-calc(16);

        transform: translateY(-50%);
      }

      &__input {
        padding-left: rem-calc(50);
        width: 100%;
      }

    &__trigger {
      @include button-search;
      display: block;
    }
  }
}
//--------------------------------------------------
// class - main
//--------------------------------------------------
&--main {
  position: relative;

  .search {
    &__pane {
      width: 100%;
      
      &.popout { 
        background-color: $white;
        height: 100vh;

        display: none;
        position: fixed;
        top: 0;
        right: 0;
        z-index: $z-300;

        @include breakpoint($small) {
          background-color: transparent;
          width: rem-calc(600); height: auto;

          position: absolute;
        }
      }

      &.popout.active { display: block; }
    }

      &__close {
        @include button-close;

        position: absolute;
        top: rem-calc(28);
        right: rem-calc(16);

        transform: translateY(-50%) scale(.7);

        @include breakpoint($small) { top: 50%; }
      }

      &__icon {
        @include icon-search-green;

        position: absolute;
        top: rem-calc(104);
        left: rem-calc(20);

        transform: translateY(-50%);

        @include breakpoint($small) { 
          left: rem-calc(16);

          top: 50%; 
        }
      }

      &__input {
        @include breakpoint-down($small) {
          border: none;
          border-bottom: black 1px solid;
          border-radius: 0;
          margin-top: rem-calc(80);
          margin-left: $gutter-small;
        }
        
        padding-left: rem-calc(32);
        width: calc(100vw - 2*#{$gutter-small});  
        
        @include breakpoint($small) { 
          padding-left: rem-calc(50);
          width: 100%; 
        }
      }

    &__trigger {
      @include button-search;
      display: block;
    }
  }
}
Update styling of the search on mobile
Update styling of the search on mobile
