/* SEE: _imports/elements/tacc-search-bar.css */
/*
Search Bar

Styles for TACC's global search bar.

Styleguide Scopes.SearchBar
*/
/* TODO: Import within `site.header.css`, not `site.tacc-search-bar.css`.

  1. Use `[data-status="loaded"]` (to learn more, search other references).
  2. Replace `:host` with `.s-search-bar`.
  2. Replace `[part="…"]` with `::part(…)`.
  3. Rename file to `s-search-bar`.
  4. Load file alongside `s-header.css`.

  This is how it works in GH-101.
*/



/* Variables */

:host {
  /* GH-101: Values for any width */
  --button-horz-pad: 10px;
  --input-horz-pad: 0.125em;

  /* GH-101: Values for expanded (desktop) width */
  --input-height: 26px;
  --button-font-size: 18px;
  --input-font-size: 14px;
}



/* Container */

:host [part="form"] {
  /* To ensure search field font matches Portal */
  /* GH-101: Set and rely on header font */
  /* SEE: https://tacc-main.atlassian.net/wiki/x/Nw9v */
  font-family: "Roboto";

  display: flex;
  align-items: center;

  position: relative;
}

/* Content */

:host [part="button"] {
  font-size: 16px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  box-sizing: content-box;
  height: var(--input-height, 38px); /* GH-101: Desktop value */
  align-items: center; /* works if has flex layout (does if class is `.icon`) */

  margin: 0;
  padding: 0 var(--button-horz-pad);

  background-color: transparent;
  border: none;

  color: var(--header-text-color);
  font-size: var(--button-font-size);
}

:host [part="input"] {
  display: block;
  width: 100%;
  height: var(--input-height);

  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  /* To indent text by the width of embedded button plus actual padding */
  /* FAQ: Using `text-indent` has text overflow as user enters beyond width */
  /* HELP: Using `text-indent` is prefered (simpler)... how to do sans bug? */
  padding-left: calc(
    var(--button-horz-pad) +
    var(--button-font-size) +
    var(--button-horz-pad) +
    var(--input-horz-pad)
  );
  padding-right: var(--input-horz-pad);

  background-color: var(--header-search-bkgd-color);
  border: var(--global-border-width--normal) solid var(--header-search-brdr-color);
  border-radius: 5px;

  color: var(--header-text-color);
  font-size: var(--input-font-size);
}
:host [part="input"]::placeholder {
  color: var(--header-text-color);
  opacity: 0.5;
}