Arc-hive-omeka-theme/asset/scss/components/_forms.scss

// search elements
.search{
  .input-group {
    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;
      padding-right: $global-padding * 9;
      + .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%);
    }
  }
}
//search block size in content
article,.omekas-entry-content {
  .search{
    @include xy-grid();
    .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;
      }
    }
  }
}