@use "../variables" as vars;
@use "../functions" as func;

.search {
  display: flex;
  
  .form-input{
    background-color: func.color(vars.$search-background-color);
    margin-top: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    &:focus{
      z-index: vars.$zindex-focus;
    }
  }

  .button-search{
    background-color: func.color(vars.$button-search-default-background-color);
    border: func.border(vars.$input-border);
    border-left: none;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    color: func.color(vars.$button-search-text-color);
    font-weight: func.font-weight("normal");
    width: inherit;    // not 100% width on mobile
    padding-top: 0;    // Search button does not have a thick bottom border
    padding-bottom: 0; // Search button does not have a thick bottom border
    &:hover{
      background-color: func.color(vars.$button-search-hover-background-color);
    }
  }
}