@include b(search-bar) {
  @include define(background, transparent);
  @include define(height, 52px);
  @include define(padding-horizontal, 16px);
  @include define(input-padding-horizontal, 8px);
  @include define(input-height, 36px);
  @include define(input-background, rgba(118, 118, 128, 0.12));
  @include define(input-font-size, var(--za-font-size-md));
  @include define(input-placeholder-color, #808084);
  @include define(input-clear-icon-color, #8e8e92);
  @include define(input-border-radius, 10px);
  @include define(cancel-font-size, var(--za-font-size-md));
  @include define(cancel-color, var(--za-theme-primary));
  @include define(cancel-margin-left, 13px);
  @include define(cancel-transition, all 0.2s);
  @include define(icon-margin-right, 6px);
  @include define(icon-color, #808084);

  background: var(--background);

  @include e(form) {
    height: var(--height);
    margin: 0 var(--padding-horizontal);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  @include e(content) {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--input-padding-horizontal);
    height: var(--input-height);
    background: var(--input-background);
    overflow: hidden;

    @include e(icon) {
      margin-right: var(--icon-margin-right);
      color: var(--icon-color);
      align-items: center;
      display: flex;
    }
  }

  @include b(input) {
    @include define(placeholder-color, var(--input-placeholder-color));
    @include define(clear-icon-color, var(--input-clear-icon-color));

    flex: 1;
    font-size: var(--input-font-size);
    background-color: transparent;

    input {
      &::-webkit-search-cancel-button {
        display: none;
      }
    }
  }

  @include e(cancel) {
    font-size: var(--cancel-font-size);
    color: var(--cancel-color);
    margin-left: var(--cancel-margin-left);
    transition: var(--cancel-transition);
  }

  @include m(focus) {
    @include e(cancel) {
      margin-right: 0;
    }
  }

  @include m(radius) {
    @include e(content) {
      border-radius: var(--input-border-radius);
    }
  }

  @include m(round) {
    @include e(content) {
      border-radius: var(--za-radius-round);
    }
  }
}