@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "searchbar.common";

// Ionic Searchbar
// --------------------------------------------------

:host {
  /**
   * @prop --focus-ring-color: The color of the ring around the focused element.
   * @prop --focus-ring-width: The width of the ring around the focused element.
   */
  --background: #{globals.$ion-bg-neutral-subtle-default};
  --border-radius: #{globals.$ion-border-radius-400};
  --box-shadow: none;
  --cancel-button-color: #{globals.$ion-primitives-neutral-800};
  --clear-button-color: #{globals.$ion-primitives-neutral-1000};
  --color: #{globals.$ion-text-default};
  --icon-color: #{globals.$ion-icon-subtlest};
  --placeholder-color: #{globals.$ion-text-subtlest};
  --focus-ring-color: #{globals.$ion-border-focus-default};
  --focus-ring-width: #{globals.$ion-border-size-050};

  @include globals.typography(globals.$ion-body-md-regular);
  @include globals.padding(0);
}

// Searchbar Search Icon
// -----------------------------------------

.searchbar-search-icon {
  width: globals.$ion-scale-400;
  height: globals.$ion-scale-400;
}

// Searchbar Input Field
// -----------------------------------------

.searchbar-input {
  @include globals.padding(globals.$ion-space-300, null);

  text-overflow: ellipsis;

  contain: strict;
}

// Searchbar Clear Input Icon
// -----------------------------------------

.searchbar-clear-button {
  width: globals.$ion-scale-400;
  height: globals.$ion-scale-400;

  background-color: transparent;

  font-size: globals.$ion-scale-400;

  contain: strict;
}

// Searchbar Cancel Icon
// -----------------------------------------

.searchbar-cancel-button {
  width: globals.$ion-scale-400;
  height: globals.$ion-scale-400;

  background-color: transparent;

  font-size: globals.$ion-font-size-400;
}

// Searchbar Search Icon & Clear Icon & Cancel Icon
// -----------------------------------------

.searchbar-search-icon,
.searchbar-clear-button,
.searchbar-cancel-button {
  @include globals.position(50%, null);

  position: absolute;

  transform: translateY(-50%);
}

// Searchbar Clear Icon & Cancel Icon
// -----------------------------------------

.searchbar-clear-button:focus-visible,
.searchbar-cancel-button:focus-visible ion-icon {
  @include globals.border-radius(globals.$ion-border-radius-100);

  outline: globals.$ion-border-size-050 globals.$ion-border-style-solid globals.$ion-border-focus-default;

  opacity: 1;
}

// Searchbar Search Icon & Cancel Icon
// -----------------------------------------
:host(:not(.searchbar-has-leading-icons)) {
  $leading-icon-padding: #{globals.$ion-scale-0};
}

:host(.searchbar-has-value) {
  --icon-color: #{globals.$ion-icon-default};
}

// Searchbar in Toolbar
// -----------------------------------------

:host(.in-toolbar.searchbar-should-show-cancel) .searchbar-cancel-button {
  /**
   * The left edge of the cancel button
   * should align with the left edge
   * of the back button if the searchbar
   * is used in a toolbar regardless of
   * the searchbar size.
   */
  @include globals.position-horizontal(globals.$ion-space-200, null);
}

// Searchbar States
// --------------------------------------------------

/* Hover */
:host(:hover) {
  --background: #{globals.$ion-primitives-neutral-200};
}

/* Focus */
:host(.searchbar-has-focus) .searchbar-input {
  outline: var(--focus-ring-width) globals.$ion-border-style-solid var(--focus-ring-color);
}

:host(.searchbar-has-focus) .searchbar-search-icon,
:host(.searchbar-has-focus) .searchbar-cancel-button,
:host(.searchbar-should-show-cancel) .searchbar-cancel-button {
  display: block;
}

:host(.searchbar-has-focus) .searchbar-cancel-button + .searchbar-search-icon,
:host(.searchbar-should-show-cancel) .searchbar-cancel-button + .searchbar-search-icon {
  display: none;
}

/* Disabled */
:host(.searchbar-disabled) {
  --color: #{globals.$ion-primitives-neutral-500};
  --icon-color: #{globals.$ion-icon-disabled};
  --placeholder-color: #{globals.$ion-text-disabled};

  cursor: default;
  pointer-events: none;
}

// Searchbar Shapes
// --------------------------------------------------

:host(.searchbar-shape-soft) {
  --border-radius: #{globals.$ion-border-radius-200};
}

:host(.searchbar-shape-round) {
  --border-radius: #{globals.$ion-border-radius-400};
}

:host(.searchbar-shape-rectangular) {
  --border-radius: #{globals.$ion-border-radius-0};
}

// Searchbar Sizes
// --------------------------------------------------

/* Small */
:host(.searchbar-size-small) .searchbar-input {
  /**
   * Padding start is based on
   * desired padding from design,
   * no leading icons.
   *
   * Padding end is based on
   * desired padding from design,
   * no trailing icons.
   */
  @include globals.padding-horizontal(globals.$ion-space-300);

  height: globals.$ion-scale-1000;
}

/* Small with Leading Icons */
:host(.searchbar-size-small.searchbar-should-show-search-icon) .searchbar-input,
:host(.searchbar-size-small.searchbar-should-show-cancel) .searchbar-input {
  /**
   * Padding start is based on
   * desired padding from design,
   * the size of the leading icon (search or cancel),
   * and the gap between the icon and the input.
   *
   * Padding end is based on
   * desired padding from design,
   * no trailing icons.
   */
  @include globals.padding-horizontal(
    calc(globals.$ion-space-300 + globals.$ion-scale-400 + globals.$ion-space-200),
    globals.$ion-space-300
  );
}

/* Small with Leading Icons and Trailing Icons */
:host(.searchbar-size-small.searchbar-should-show-search-icon.searchbar-should-show-clear) .searchbar-input,
:host(.searchbar-size-small.searchbar-should-show-cancel.searchbar-should-show-clear) .searchbar-input {
  /**
   * Padding start is based on
   * desired padding from design,
   * the size of the leading icon (search or cancel),
   * and the gap between the icon and the input.
   *
   * Padding end is based on
   * desired padding from design,
   * the size of the trailing icon (clear),
   * and the gap between the icon and the input.
   */
  @include globals.padding-horizontal(calc(globals.$ion-space-300 + globals.$ion-scale-400 + globals.$ion-space-200));
}

/* Small with Trailing Icons */
:host(.searchbar-size-small.searchbar-should-show-clear) .searchbar-input {
  /**
   * Padding start is based on
   * desired padding from design,
   * no leading icons.
   *
   * Padding end is based on
   * desired padding from design,
   * the size of the trailing icon (clear),
   * and the gap between the icon and the input.
   */
  @include globals.padding-horizontal(
    globals.$ion-space-300,
    calc(globals.$ion-space-300 + globals.$ion-scale-400 + globals.$ion-space-200)
  );
}

:host(.searchbar-size-small) .searchbar-search-icon,
:host(.searchbar-size-small) .searchbar-cancel-button {
  // Start is based on the desired padding start from design.
  @include globals.position-horizontal(globals.$ion-space-300, null);
}

:host(.searchbar-size-small) .searchbar-clear-button {
  // End is based on the desired padding end from design.
  @include globals.position-horizontal(null, globals.$ion-space-300);
}

/* Medium */
:host(.searchbar-size-medium) .searchbar-input {
  /**
   * Padding start is based on
   * desired padding from design,
   * no leading icons.
   *
   * Padding end is based on
   * desired padding from design,
   * no trailing icons.
   */
  @include globals.padding-horizontal(globals.$ion-space-400);

  height: globals.$ion-scale-1200;
}

/* Medium with Leading Icons */
:host(.searchbar-size-medium.searchbar-should-show-search-icon) .searchbar-input,
:host(.searchbar-size-medium.searchbar-should-show-cancel) .searchbar-input {
  /**
   * Padding start is based on
   * desired padding from design,
   * the size of the leading icon (search or cancel),
   * and the gap between the icon and the input.
   *
   * Padding end is based on
   * desired padding from design,
   * no trailing icons.
   */
  @include globals.padding-horizontal(
    calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200),
    globals.$ion-space-400
  );
}

/* Medium with Leading Icons and Trailing Icons */
:host(.searchbar-size-medium.searchbar-should-show-search-icon.searchbar-should-show-clear) .searchbar-input,
:host(.searchbar-size-medium.searchbar-should-show-cancel.searchbar-should-show-clear) .searchbar-input {
  /**
   * Padding start is based on
   * desired padding from design,
   * the size of the leading icon (search or cancel),
   * and the gap between the icon and the input.
   *
   * Padding end is based on
   * desired padding from design,
   * the size of the trailing icon (clear),
   * and the gap between the icon and the input.
   */
  @include globals.padding-horizontal(calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200));
}

/* Medium with Trailing Icons */
:host(.searchbar-size-medium.searchbar-should-show-clear) .searchbar-input {
  /**
   * Padding start is based on
   * desired padding from design,
   * no leading icons.
   *
   * Padding end is based on
   * desired padding from design,
   * the size of the trailing icon (clear),
   * and the gap between the icon and the input.
   */
  @include globals.padding-horizontal(
    globals.$ion-space-400,
    calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200)
  );
}

:host(.searchbar-size-medium) .searchbar-search-icon,
:host(.searchbar-size-medium) .searchbar-cancel-button {
  // Start is based on the desired padding start from design.
  @include globals.position-horizontal(globals.$ion-space-400, null);
}

:host(.searchbar-size-medium) .searchbar-clear-button {
  // End is based on the desired padding end from design.
  @include globals.position-horizontal(null, globals.$ion-space-400);
}

:host(.in-toolbar.searchbar-size-small.searchbar-should-show-cancel) .searchbar-input,
:host(.in-toolbar.searchbar-size-medium.searchbar-should-show-cancel) .searchbar-input {
  /**
   * Padding start is based on
   * the alignment of the back button,
   * the size of the leading icon (search or cancel),
   * and the gap between the icon and the input.
   */
  padding-inline-start: globals.$ion-space-800;
}

/* Large */
:host(.searchbar-size-large) .searchbar-search-icon,
:host(.searchbar-size-large) .searchbar-cancel-button {
  width: globals.$ion-scale-500;
  height: globals.$ion-scale-500;
}

:host(.searchbar-size-large) .searchbar-cancel-button {
  font-size: globals.$ion-font-size-500;
}

:host(.searchbar-size-large) .searchbar-input {
  @include globals.padding(globals.$ion-space-400, null);

  /**
   * Padding start is based on
   * desired padding from design,
   * the size of the leading icon (search or cancel),
   * and the gap between the icon and the input.
   *
   * Padding end is based on
   * desired padding from design,
   * the size of the trailing icon (clear),
   * and the gap between the icon and the input.
   */
  @include globals.padding-horizontal(globals.$ion-space-500);

  height: globals.$ion-scale-1400;
}

/* Large with Leading Icons */
:host(.searchbar-size-large.searchbar-should-show-search-icon) .searchbar-input,
:host(.searchbar-size-large.searchbar-should-show-cancel) .searchbar-input {
  /**
   * Padding start is based on
   * desired padding from design,
   * the size of the leading icon (search or cancel),
   * and the gap between the icon and the input.
   *
   * Padding end is based on
   * desired padding from design,
   * no trailing icons.
   */
  @include globals.padding-horizontal(
    calc(globals.$ion-space-500 + globals.$ion-scale-500 + globals.$ion-space-200),
    globals.$ion-space-500
  );
}

/* Large with Leading Icons and Trailing Icons */
:host(.searchbar-size-large.searchbar-should-show-search-icon.searchbar-should-show-clear) .searchbar-input,
:host(.searchbar-size-large.searchbar-should-show-cancel.searchbar-should-show-clear) .searchbar-input {
  /**
   * Padding start is based on
   * desired padding from design,
   * the size of the leading icon (search or cancel),
   * and the gap between the icon and the input.
   *
   * Padding end is based on
   * desired padding from design,
   * the size of the trailing icon (clear),
   * and the gap between the icon and the input.
   */
  @include globals.padding-horizontal(
    calc(globals.$ion-space-500 + globals.$ion-scale-500 + globals.$ion-space-200),
    calc(globals.$ion-space-500 + globals.$ion-scale-400 + globals.$ion-space-200)
  );
}

/* Large with Trailing Icons */
:host(.searchbar-size-large.searchbar-should-show-clear) .searchbar-input {
  /**
   * Padding start is based on
   * desired padding from design,
   * no leading icons.
   *
   * Padding end is based on
   * desired padding from design,
   * the size of the trailing icon (clear),
   * and the gap between the icon and the input.
   */
  @include globals.padding-horizontal(
    globals.$ion-space-500,
    calc(globals.$ion-space-500 + globals.$ion-scale-400 + globals.$ion-space-200)
  );
}

:host(.in-toolbar.searchbar-size-large.searchbar-should-show-cancel) .searchbar-input {
  /**
   * Padding start is based on
   * the alignment of the back button,
   * the size of the leading icon (search or cancel),
   * and the gap between the icon and the input.
   */
  padding-inline-start: globals.$ion-space-900;
}

:host(.searchbar-size-large) .searchbar-search-icon,
:host(.searchbar-size-large) .searchbar-cancel-button {
  // Start is based on the desired padding start from design.
  @include globals.position-horizontal(globals.$ion-space-500, null);
}

:host(.searchbar-size-large) .searchbar-clear-button {
  // End is based on the desired padding end from design.
  @include globals.position-horizontal(null, globals.$ion-space-500);
}