/* Here are the overrides needed to display the search button
after moving it from the header to the sidebar. */

.md-search {
  position: relative;
  height: 3.5rem;
}

.md-search__overlay {
  transition: none;
}

.md-search__inner {
  opacity: 1;
  transition: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  width: 11rem;
  height: auto;
  max-width: 100%;
}

.md-search__form {
  border-radius: 7px;
  height: 1.8rem;
  background-color: var(--search-form-bg-color);
  border-width: 1px;
  border-style: solid;
  border-color: var(--search-form-border-color);

  &:hover{
    background-color: var(--search-form-bg-hover-color);
    border-color: var(--search-form-border-hover-color);
  }
}

.md-search__input{
  color: inherit;
  font-size: .8rem;
  height: 100%;
  width: 100%;

  &::placeholder {
    opacity: 0.5;
    color: var(--md-default-fg-color);
  }

  & + .md-search__icon {
    opacity: 0.5;
    color: var(--md-default-fg-color);
  }
}

/* Prevent background scrolling when search modal is active */
html:has([data-md-toggle="search"]:checked) {
  overflow: hidden;
}


/* 960px = 60rem */
@media screen and (min-width: 60rem) {

  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar-primary-container {

    .md-sidebar--primary{
      z-index: 4;
    }

    .md-search{
      z-index: 2;
    }

    /* Background for search modal */
    .md-search__overlay {
      width: 100vw;
      height: 100vh;
      opacity: 1;
      z-index: 0;
      pointer-events: auto;
      transition: none;
      backdrop-filter: blur(5px);
    }

    .md-search__inner {
      position: fixed;
      left: 50%;
      top: 20%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: auto;
      float: none;
      opacity: 1;
      z-index: 1;
    }

    /* [form] -> [[icon][input][options]]*/
    .md-search__form {
      height: 1.8rem;
      background-color: var(--md-default-bg-color);
      border-radius: 5px 5px 0 0;
      border: 0;
    }

    .md-search__icon {
      color: var(--md-default-fg-color--light);
    }

    .md-search__input {
      /* Override clear button -> x */
      &:valid ~ .md-search__options {
        & > .md-icon {
          opacity: 1;
          pointer-events: auto;
        }
        & > .md-icon:hover {
          opacity: 0.7;
        }
      }
      /* Dim "Search" placeholder */
      &::placeholder {
        opacity: 0.2;
      }
    }

    .md-search__output {
      position: absolute;
      top: auto;
      width: 100%;
      height: auto;
      border-radius: 0 0 5px 5px;
      opacity: 1;
    }

    .md-search__scrollwrap {
      width: 100%;
      max-height: 60vh
    }

    .md-search-result {
      width: 100%;
      height: auto;
      max-height: 100%;
      opacity: 1;
    }
  }
}


/* 959.75px = 59.984rem */
@media screen and (max-width: 59.984rem) {

  .md-header__button[for="__search"] {
    display: none;
  }

  .md-search__icon{
    &[for="__search"]{
      top: .3rem;
      svg:first-child {
        display: block;
      }
      svg:last-child {
        display: none;
      }
    }
  }

  [dir="ltr"] .md-search__inner {
    left: 50%;
  }

  [dir="ltr"] .md-search__icon[for="__search"] {
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
  }

  [dir="ltr"] .md-search__input {
    padding-left: 2.2rem;
    padding-right: 2.2rem;
  }

  /* To display toc above the search */
  .md-nav__toggle:checked ~ .md-nav {
    z-index: 2;
  }

  [data-md-toggle="search"]:checked ~ .md-container .md-main .md-sidebar-primary-container {

    /* Full screen search modal */
    .md-search__inner {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      z-index: 2;
      overflow: hidden;
      transform: none;
      float: none;
      transition: none;
    }

    /* [form] -> [[icon][input][options]]*/
    .md-search__form {
      height: 2.4rem;
      background-color: var(--md-default-bg-color);
      border-radius: 0;
      border: 0;
    }

    .md-search__icon {
      color: var(--md-default-fg-color--light);

      &[for="__search"] {
        top: 50%;
        transform: translateY(-50%);
        left: 0.5rem;

        /* Show back arrow, hide magnifying glass */
        svg:first-child {
          display: none;
        }
        svg:last-child {
          display: block;
        }
      }
    }

    .md-search__input {
      font-size: .9rem;

      /* Override clear button -> x */
      &:valid ~ .md-search__options {
        top: 50%;
        transform: translateY(-50%);

        & > .md-icon {
          opacity: 1;
          pointer-events: auto;
        }
        & > .md-icon:hover {
          opacity: 0.7;
        }
      }
      /* Dim "Search" placeholder */
      &::placeholder {
        opacity: 0.2;
      }
    }

    .md-search__options {
      top: 50%;
      transform: translateY(-50%);

      & > .md-icon {
        transform: none;
      }
    }
  }
}


/* Some overrides related to the new search button position */
/* Keep color palette toggle unchanged */
[data-md-toggle="search"]:checked ~ .md-header .md-header__option {
  max-width: 100%;
  opacity: 1;
}