/* = Project info and vars. */
:import {
  -st-from: "./project.st.css";
  -st-default: StudyUK;
  -st-named: --suk-light-pink;
}

:import {
  -st-from: "../base/project.st.css";
  -st-named:
    tablet,
    --color-accent-1,
    --color-background-1,
    --color-ui,
    --color-ui-inverse,
    --color-accent-4;
}

/* CSS API from component directory. */
:import {
  -st-from: "../../components/Search/search.st.css";
  -st-default: Search;
}

:import {
  -st-from: "../../components/HeaderSearch/headerSearch.st.css";
  -st-default: HeaderSearch;
}

/* Get the search var referances we have defined in our base theme. */
:import {
  -st-from: "../base/search.st.css";
  -st-named:
    --input-background-color,
    --input-color,
    --input-border-radius,
    --input-border-color;
}

@st-scope StudyUK {
  Search {
    --input-background-color: var(--color-accent-1);
    --input-color: var(--color-ui-inverse);
    --input-border-radius: 5px;
    --input-border-color: var(--suk-light-pink);
  }

  HeaderSearch:isOpen::searchToggle svg {
    stroke: var(--color-ui-inverse);
  }
}