/* search.st.css */
@namespace "Search";

:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --color-background-main,
    --color-ui,
    --color-accent-4;
}

:import {
  -st-from: "../../components/Search/search.st.css";
  -st-default: Search;
}

:import {
  -st-from: "../../mixins/boxShadowFocus.st.css";
  -st-named: boxShadowInset;
}

@st-scope Base {
  Search {
    --input-border-radius: 30px;
    --input-background-color: var(--color-background-main);
    --input-color: var(--color-ui);
    --input-border-color: var(--color-accent-4);
  }

  Search::label {
    display: flex;
    align-items: center;
    color: var(--input-color);
    margin-right: -40px;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
  }

  Search::labelIcon {
    display: inline-flex;
  }

  Search::labelIcon svg {
    width: 20px;
    height: 20px;
  }

  Search::input {
    border: none;
    color: var(--input-color);
    background-color: var(--input-background-color);
    padding: 10px 10px 10px 40px;
    width: 100%;
    border-radius: var(--input-border-radius);
    /* This needs to be 16px on mobile to avoid auto zoom on focus. */
    font-size: 16px;
    box-sizing: content-box;
    transition: .3s cubic-bezier(.215, .61, .355, 1);
    box-shadow: 0 0 0 2px var(--input-border-color) inset;
  }

  Search::input::placeholder {
    color: var(--input-color);
  }

  Search::input:focus {
    outline: none;
  }
}

@st-scope [dir=rtl] Base {
  Search::label {
    margin-right: 0;
    margin-left: -40px;
  }
}

@media value(tablet) {
  @st-scope Base {
    Search::input {
      padding-top: 7px;
      padding-bottom: 7px;
      font-size: 15px;
    }
  }
}