/* header.st.css */
@namespace "HeaderSearch";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --color-ui,
    --color-ui-inverse;
}

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

:import {
  -st-from: "../../components/Button/button.st.css";
  -st-default: Button;
}

:import {
  -st-from: "../../components/OverflowTabs/overflowTabs.st.css";
  -st-default: OverflowTabs;
}

:import {
  -st-from: "../../components/Nav/nav.st.css";
  -st-default: Nav;
}

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

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

@st-scope Base {

  /* Mobile Menu */
  HeaderSearch::searchToggle {
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: none;
    position: absolute;
    top: 0;
    width: 45px;
    height: 45px;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    outline: none
  }

  HeaderSearch::searchToggle {
    right: 10px;
  }

  HeaderSearch::searchToggle:focus-visible {
    -st-mixin: boxShadowInset;
  }

  HeaderSearch::searchToggle svg {
    position: relative;
    fill: none;
    stroke: var(--color-ui-inverse);
    transition: stroke .3s cubic-bezier(.215, .61, .355, 1);
  }

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

  HeaderSearch::searchToggle:hover {
    cursor: pointer;
  }

  HeaderSearch::searchForm {
    position: absolute;
    top: 4px;
    z-index: 0;
    width: calc(100vw - 100px);
    width: auto;
    transition: .3s cubic-bezier(.215, .61, .355, 1);
    overflow: hidden;
    opacity: 0;
    left: calc(100% - 50px);
    right: 10px;
  }

  HeaderSearch:isOpen::searchForm {
    left: 6px;
    opacity: 1;
    z-index: 100;
  }

  HeaderSearch::searchForm::input {
    padding-right: 40px;
  }
}

@st-scope [dir=rtl] Base {
  HeaderSearch::searchToggle {
    right: auto;
    left: 10px;
  }

  HeaderSearch:isOpen::searchForm {
    right: calc(100% - 50px);
    left: 10px;
  }

  HeaderSearch:isOpen::searchForm {
    right: 6px;
  }
}

/* Tablets and above */
/* Had to keep it wide as design doesn't want scrolling or wrapping. */
@media value(tablet) {
  @st-scope Base {
    HeaderSearch::searchForm {
      top: 15px;
      right: 20px;
      width: auto
    }

    HeaderSearch:isOpen::searchForm {
      /* Desired open width of the search form is the number we take from 100%. */
      left: calc(100% - 360px);
    }

    HeaderSearch:isOpen Nav {
      transition: .3s cubic-bezier(.215, .61, .355, 1);
    }

    HeaderSearch:isOpen Nav {
      opacity: .2;
    }

    /* Search desktop adjustments */
    HeaderSearch::searchToggle {
      width: 60px;
      height: 60px;
    }
  }
}

@media value(tablet) {
  @st-scope [dir=rtl] Base {
    HeaderSearch::searchForm {
      right: calc(100% - 50px);
      left: 20px;
    }

    HeaderSearch:isOpen::searchForm {
      left: 20px;
      /* Desired open width of the search form is the number we take from 100%. */
      right: calc(100% - 360px);
    }
  }
}