@import "~scss/variables";

/* Center the search box */
#main-nav-search.form-inline {
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;

  input.form-control[type=text] {
    border: none;

    width: 100%;
    max-width: 400px;

    margin: 0 auto;

    /* All the tedious recolouring nonsense */
    background: $navbar-search-bg;
    color: $navbar-search-color;

    transition: $transition-base;

    &::placeholder {
      color: $navbar-search-placeholder-color;

      transition: $transition-base;

      font-size: $navbar-search-placeholder-font-size;
      vertical-align: middle;
    }

    &:hover {
      background: $navbar-search-hover-bg;
      color: $navbar-search-hover-color;
    
      &::placeholder {
        color: $navbar-search-hover-placeholder-color;
      }
    }

    &:focus {
      background: $navbar-search-focus-bg;
      color: $navbar-search-focus-color;
    
      &::placeholder {
        color: $navbar-search-focus-placeholder-color;
      }
    }

    // Make the search box full width on mobile
    @include media-breakpoint-down(sm) {
      max-width: 100%;
    }
  }
}