hugo-theme-zzo/assets/sass/components/_subs.scss

.subs {
  padding: 0.25rem;
  margin: 2.5rem 0;
  z-index: z('taxo');

  &__title {
    font-weight: 700;
    font-family: $taxo_titie_font;
    margin-bottom: 0.5rem;
    @include themify($themes) {
      color: themed('taxo-title-color');
    }
  }

  &__form {
    @include flexbox();
    @include align-items(center);
    margin-bottom: 0.25rem;
  }

  &__icon {
    padding: 0.3rem;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;    

    @include flexbox();
    @include align-items(center);
    @include themify($themes) {
      color: themed("search-icon-color");
      background-color: themed("search-background-color");
    }
  }

  &__input {
    height: 32px;
    width: 100%;
    padding: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    margin-right: 1rem;
    border: none;
    outline: none;
    @include themify($themes) {
      color: themed("search-color");
      background-color: themed("search-background-color");
      @include input-placeholder {
          font-family: $search_placeholder_font;
          color: themed("search-placeholder-color");
      }      
    }
  }

  &__button {
    border-radius: 0.125rem;
    border: none;
    outline: none;
    height: 25px;
    width: auto;
    min-width: 60px;    
    cursor: pointer;

    @include transition(all, 0.25s, ease);
    @include themify($themes) {
      color: themed('subs-button-color');
      background-color:themed('subs-button-background-color');
      @include on-event {
        background-color:themed('subs-button-hover-background-color');
      }
    }
  }
}