.header {
  --#{$prefix}nav-link-color: #{$tertiary-bg};

  margin-top: 15px;
  padding: 0;
  position: relative;

  form {
    .search-query {
      border: none;
      padding-left: 26px;
      @include transition(width 0.2s);
      width: 200px;

      &:focus {
        width: 240px;
        @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));

        & + .btn {
          background: var(--#{$prefix}nav-link-color);
          color: #b8b8b8;
          font-size: 17px;
          width: 30px;
          line-height: 30px;
        }
      }
    }

    .btn {
      color: var(--#{$prefix}nav-link-color);
      width: 40px;
      padding: 0;
      font-size: 19.5px;
      outline: 0;
      background: none;
      text-align: center;
      vertical-align: middle;
      text-shadow: none;
    }
  }

  .navbar-nav {
    --#{$prefix}nav-link-color: #{$tertiary-bg};

    > .nav-item {
      .nav-link {
        > i {
          font-size: 19.5px;
        }
      }
    }
  }

  .vr {
    background: linear-gradient(transparent, var(--#{$prefix}nav-link-color), transparent);
  }
}

[data-bs-theme='dark'] {
  .header {
    --#{$prefix}nav-link-color: #{$tertiary-bg-dark};

    .navbar-nav {
      --#{$prefix}nav-link-color: #{$tertiary-bg-dark};
    }
  }
}