header {
  display: flex;
  line-height: var(--navbar-size);
  padding: 0 var(--padding-normal);
  font-size: var(--font-header-size);
  gap: var(--padding-large);
  align-items: center;
}

.header__link {
  color: var(--text-color) !important;
}

.header__link--user {
  display: flex;
  align-items: center;
  gap: var(--padding-normal);
}

.header__logo {
  font-size: var(--font-h1-size)
}

.header__search {
  @extend .flex;
  @extend .flex--no-wrap;
  @extend .flex--centered;

  border: 0;
  border-radius: var(--border-radius-inner);
  background: var(--primary-muted-color);
  height: var(--navbar-input-size);
}

.header__search > button {
  background: 0;
  border: 0;
}

.header__input {
  @include animated-transition;
  height: var(--navbar-input-size);
  font-size: var(--font-size);
  background: 0;
  border: 0;
  box-shadow: 0;
}

.header__input--text {
  width: var(--navbar-input-width);
  max-width: var(--navbar-input-max-width);
}

.header__search__button {
  display: flex;
  align-items: center;
  height: var(--navbar-input-size);
  color: var(--text-color) !important;
  padding: 0 var(--padding-normal);
}

.header__search__button:hover {
  background: var(--primary-color);
  cursor: pointer;
}

.header__filter-form {
  padding: 0 var(--padding-normal);
}

nav.header__secondary {
  display: flex;
  line-height: var(--navbar-secondary-size);
  padding: 0 var(--padding-normal);
  font-size: var(--font-header-size);
  gap: var(--padding-large);
  align-items: center;
  background: var(--primary-muted-color);
}

nav.dropdown__content {
  line-height: var(--navbar-secondary-size);
}

@include if-mobile {
  header {
    gap: var(--padding-normal);
    flex-wrap: wrap;
    margin-bottom: var(--padding-normal);
  }

  nav.header__secondary {
    display: none;
  }

  form.header__search {
    width: 100%;
    order: 1;
  }

  .header__input--text {
    width: 100% !important;
    max-width: 100% !important;
  }
}