// Need to override css, as in Angular, we have a supplementary component shell

nj-icon.nj-search__icon {
  position: absolute;
  top: 50%;
  left: var(--nj-semantic-size-spacing-16);
  transform: translateY(-50%);

  .nj-icon-material {
    --nj-material-icon-color: var(--nj-semantic-color-icon-neutral-tertiary-default);
  }
}

nj-icon-button.nj-search__clear-button {
  position: absolute;
  top: 50%;
  right: var(--nj-semantic-size-spacing-16);
  transform: translateY(-50%);

  .nj-icon-btn {
    --nj-icon-btn-bg-color: var(--nj-semantic-color-background-neutral-primary-translucent-default);
    --nj-icon-btn-color: var(--nj-semantic-color-icon-neutral-tertiary-default);

    --nj-icon-btn-hovered-bg-color: var(--nj-semantic-color-background-neutral-primary-translucent-hovered);
    --nj-icon-btn-hovered-color: var(--nj-semantic-color-icon-neutral-tertiary-default);

    --nj-icon-btn-focused-bg-color: var(--nj-semantic-color-background-neutral-primary-translucent-focused);
    --nj-icon-btn-focused-color: var(--nj-semantic-color-icon-neutral-tertiary-default);

    --nj-icon-btn-pressed-bg-color: var(--nj-semantic-color-background-neutral-primary-translucent-pressed);
    --nj-icon-btn-pressed-color: var(--nj-semantic-color-icon-neutral-tertiary-default);
    --nj-icon-btn-padding: var(--nj-semantic-size-spacing-4);
    --nj-icon-btn-icon-size: var(--nj-semantic-size-icon-md);
  }
}